/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 1;
   --c: linear-gradient(#000 0 0);
   --m: radial-gradient(farthest-side,#000 92%,#0000);
  background: 
    var(--m) center               /12px 12px,
    var(--c) left 50% top    -20px/8px 16px, 
    var(--c) left 50% bottom -20px/8px 16px, 
    var(--c) top  50% left   -20px/16px 8px, 
    var(--c) top  50% right  -20px/16px 8px;
  background-repeat: no-repeat;
  animation: 
    l18-1 1.5s infinite,
    l18-2 1.5s infinite;
}
@keyframes l18-1 {
  30%,
  70% {background-position: 
        center,
        left 50% top    calc(50% - 8px),
        left 50% bottom calc(50% - 8px),
        top  50% left   calc(50% - 8px),
        top  50% right  calc(50% - 8px)}
}
@keyframes l18-2 {
  0%,40%   {transform: rotate(0)}
  60%,100% {transform: rotate(90deg)}
}


/* HTML: <div class="loader"></div> */
.loader-two {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  animation: l1 1s linear infinite alternate;
}
.loader-two:before {
  content:"Loading..."
}
@keyframes l1 {to{opacity: 0}}


/* HTML: <div class="loader"></div> */
.loader-three {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  white-space: pre;
  font-size: 30px;
}
.loader-three:before {
  content: "Loading...";
  animation: l34 1s infinite alternate;
}

@keyframes l34{
  0%,15%,75%,100% {
   content:"Loading...";
  }
  20% {content:"Loading..."}
  25% {content:"Lo ding..."}
  30% {content:"Load ng..."}
  35% {content:" oading..."}
  40% {content:"L ading..."}
  45% {content:"Loadin ..."}
  50% {content:"Loa ing..."}
  55% {content:"Loading  ."}
  60% {content:" oa ing..."}
  65% {content:"L ading..."}
  70% {content:"Load n ..."}
}