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  height: 120px;
  8  width: auto;
  9  margin: 2rem;
 10 
 11  font-family: "Poppins", sans-serif;
 12  font-size: 1.6em;
 13  font-weight: 600;
 14  user-select: none;
 15  color: #fff;
 16 
 17  scale: 2;
 18}
 19 
 20.loader {
 21  position: absolute;
 22  top: 0;
 23  left: 0;
 24  height: 100%;
 25  width: 100%;
 26  z-index: 1;
 27 
 28  background-color: transparent;
 29  mask: repeating-linear-gradient(
 30    90deg,
 31    transparent 0,
 32    transparent 6px,
 33    black 7px,
 34    black 8px
 35  );
 36}
 37 
 38.loader::after {
 39  content: "";
 40  position: absolute;
 41  top: 0;
 42  left: 0;
 43  width: 100%;
 44  height: 100%;
 45 
 46  background-image: radial-gradient(circle at 50% 50%, #ff0 0%, transparent 50%),
 47    radial-gradient(circle at 45% 45%, #f00 0%, transparent 45%),
 48    radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%),
 49    radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%),
 50    radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
 51  mask: radial-gradient(
 52    circle at 50% 50%,
 53    transparent 0%,
 54    transparent 10%,
 55    black 25%
 56  );
 57  animation:
 58    transform-animation 2s infinite alternate,
 59    opacity-animation 4s infinite;
 60  animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1);
 61}
 62 
 63@keyframes transform-animation {
 64  0% {
 65    transform: translate(-55%);
 66  }
 67  100% {
 68    transform: translate(55%);
 69  }
 70}
 71 
 72@keyframes opacity-animation {
 73  0%,
 74  100% {
 75    opacity: 0;
 76  }
 77  15% {
 78    opacity: 1;
 79  }
 80  65% {
 81    opacity: 0;
 82  }
 83}
 84 
 85.loader-letter {
 86  display: inline-block;
 87  opacity: 0;
 88  animation: loader-letter-anim 4s infinite linear;
 89  z-index: 2;
 90}
 91 
 92.loader-letter:nth-child(1) {
 93  animation-delay: 0.1s;
 94}
 95.loader-letter:nth-child(2) {
 96  animation-delay: 0.205s;
 97}
 98.loader-letter:nth-child(3) {
 99  animation-delay: 0.31s;
100}
101.loader-letter:nth-child(4) {
102  animation-delay: 0.415s;
103}
104.loader-letter:nth-child(5) {
105  animation-delay: 0.521s;
106}
107.loader-letter:nth-child(6) {
108  animation-delay: 0.626s;
109}
110.loader-letter:nth-child(7) {
111  animation-delay: 0.731s;
112}
113.loader-letter:nth-child(8) {
114  animation-delay: 0.837s;
115}
116.loader-letter:nth-child(9) {
117  animation-delay: 0.942s;
118}
119.loader-letter:nth-child(10) {
120  animation-delay: 1.047s;
121}
122 
123@keyframes loader-letter-anim {
124  0% {
125    opacity: 0;
126  }
127  5% {
128    opacity: 1;
129    text-shadow: 0 0 4px #fff;
130    transform: scale(1.1) translateY(-2px);
131  }
132  20% {
133    opacity: 0.2;
134  }
135  100% {
136    opacity: 0;
137  }
138}