1 
 2<div class="loader-wrapper">
 3  <span class="loader-letter">G</span>
 4  <span class="loader-letter">e</span>
 5  <span class="loader-letter">n</span>
 6  <span class="loader-letter">e</span>
 7  <span class="loader-letter">r</span>
 8  <span class="loader-letter">a</span>
 9  <span class="loader-letter">t</span>
10  <span class="loader-letter">i</span>
11  <span class="loader-letter">n</span>
12  <span class="loader-letter">g</span>
13 
14  <div class="loader"></div>
15</div>          

  1 
  2.loader-wrapper {
  3  position: relative;
  4  display: flex;
  5  align-items: center;
  6  justify-content: center;
  7  width: 180px;
  8  height: 180px;
  9  font-family: "Inter", sans-serif;
 10  font-size: 1.2em;
 11  font-weight: 300;
 12  color: white;
 13  border-radius: 50%;
 14  background-color: transparent;
 15  user-select: none;
 16}
 17 
 18.loader {
 19  position: absolute;
 20  top: 0;
 21  left: 0;
 22  width: 100%;
 23  aspect-ratio: 1 / 1;
 24  border-radius: 50%;
 25  background-color: transparent;
 26  animation: loader-rotate 2s linear infinite;
 27  z-index: 0;
 28}
 29 
 30@keyframes loader-rotate {
 31  0% {
 32    transform: rotate(90deg);
 33    box-shadow:
 34      0 10px 20px 0 #fff inset,
 35      0 20px 30px 0 #ad5fff inset,
 36      0 60px 60px 0 #471eec inset;
 37  }
 38  50% {
 39    transform: rotate(270deg);
 40    box-shadow:
 41      0 10px 20px 0 #fff inset,
 42      0 20px 10px 0 #d60a47 inset,
 43      0 40px 60px 0 #311e80 inset;
 44  }
 45  100% {
 46    transform: rotate(450deg);
 47    box-shadow:
 48      0 10px 20px 0 #fff inset,
 49      0 20px 30px 0 #ad5fff inset,
 50      0 60px 60px 0 #471eec inset;
 51  }
 52}
 53 
 54.loader-letter {
 55  display: inline-block;
 56  opacity: 0.4;
 57  transform: translateY(0);
 58  animation: loader-letter-anim 2s infinite;
 59  z-index: 1;
 60  border-radius: 50ch;
 61  border: none;
 62}
 63 
 64.loader-letter:nth-child(1) {
 65  animation-delay: 0s;
 66}
 67.loader-letter:nth-child(2) {
 68  animation-delay: 0.1s;
 69}
 70.loader-letter:nth-child(3) {
 71  animation-delay: 0.2s;
 72}
 73.loader-letter:nth-child(4) {
 74  animation-delay: 0.3s;
 75}
 76.loader-letter:nth-child(5) {
 77  animation-delay: 0.4s;
 78}
 79.loader-letter:nth-child(6) {
 80  animation-delay: 0.5s;
 81}
 82.loader-letter:nth-child(7) {
 83  animation-delay: 0.6s;
 84}
 85.loader-letter:nth-child(8) {
 86  animation-delay: 0.7s;
 87}
 88.loader-letter:nth-child(9) {
 89  animation-delay: 0.8s;
 90}
 91.loader-letter:nth-child(10) {
 92  animation-delay: 0.9s;
 93}
 94 
 95@keyframes loader-letter-anim {
 96  0%,
 97  100% {
 98    opacity: 0.4;
 99    transform: translateY(0);
100  }
101  20% {
102    opacity: 1;
103    transform: scale(1.15);
104  }
105  40% {
106    opacity: 0.7;
107    transform: translateY(0);
108  }
109}