JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div class="loader" id="l1">Loading</div>
<div class="loader" id="l2">Loading</div>
<div class="loader" id="l3">Loading</div>
<div class="loader" id="l4">Loading</div>

CSS

#l1 {
  background: conic-gradient(#000 0 0) 0/0% 100% no-repeat text;
  animation: l1 1s linear infinite;
}
@keyframes l1 {
  to {
    background-size: 120% 100%;
  }
}

#l2 {
  font-family: monospace;
  background: conic-gradient(#000 0 0) 0/0 100% no-repeat text;
  animation: l2 2s steps(8) infinite;
}
@keyframes l2 {
  to {
    background-size: calc(800% / 7) 100%;
  }
}

#l3 {
  line-height: 1.5;
  background: radial-gradient(1.13em at 50% 1.6em, #000 99%, #0000 101%)
      calc(50% - 1.6em) 0/3.2em 100% text,
    radial-gradient(1.13em at 50% -0.8em, #0000 99%, #000 101%) 50% 0.8em/3.2em
      100% repeat-x text;
  animation: l3 2s linear infinite;
}
@keyframes l3 {
  to {
    background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) 0.8em;
  }
}

#l4 {
  font-family: monospace;
  --g: conic-gradient(#000 0 0) no-repeat text;
  background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch,
    var(--g) 5ch, var(--g) 6ch;
  background-position-y: bottom;
  animation: l4 3s infinite;
}
@keyframes l4 {
  0% {
    background-size: 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0;
  }
  14.28% {
    background-size: 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0;
  }
  28.57% {
    background-size: 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0;
  }
  42.85% {
    background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0;
  }
  57.14% {
    background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0;
  }
  71.43% {
    background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0,
      1ch 0;
  }
  85.71% {
    background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%,
      1ch 0;
  }
  100% {
    background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%,
      1ch 100%;
  }
}

.loader {
  margin: auto;
  font-size: 50px;
  font-family: system-ui, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px...