/* https://css-loaders.com/ */

.loader-l12 {
  --s: 40px;
  --g: 5px;

  height: calc(2*(var(--s) + var(--g)));
  aspect-ratio: 1;
  background:
    radial-gradient(calc(var(--s)/sqrt(2)) at calc(50% - .1*var(--s)) calc(50% - .2*var(--s)), #0000 5%, 60%, #111 98%),
    linear-gradient(#FE4365 0 0) no-repeat #fff;
  background-size: 50% 50%;
  mask: radial-gradient(calc(var(--s)/2), #000 calc(100% - 1px), #0000) 0 0/50% 50%;
  animation: l12 steps(3) 1.5s infinite;
}

@keyframes l12 {

  0%,
  12.5% {
    background-position: 0 0
  }

  12.6%,
  37.5% {
    background-position: 0 0, 100% 0
  }

  37.6%,
  62.5% {
    background-position: 0 0, 100% 100%
  }

  62.6%,
  87.5% {
    background-position: 0 0, 0 100%
  }

  87.6%,
  100% {
    background-position: 0 0
  }
}

/* HTML: <div class="loader"></div> */
.loader-l9 {
  --s: 25px;
  --g: 5px;

  width: calc(2*(1.353*var(--s) + var(--g)));
  aspect-ratio: 1;
  background:
    linear-gradient(#ff1818 0 0) left/50% 100% no-repeat,
    conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
      #fff 135deg, #666 0 270deg, #aaa 0);
  background-blend-mode: multiply;
  --_m:
    linear-gradient(to bottom right,
      #0000 calc(0.25*var(--s)), #000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)), #0000 0),
    conic-gradient(from -90deg at right var(--g) bottom var(--g), #000 90deg, #0000 0);
  -webkit-mask: var(--_m);
  mask: var(--_m);
  background-size: 50% 50%;
  -webkit-mask-size: 50% 50%;
  mask-size: 50% 50%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: l9 1.5s infinite;
}

@keyframes l9 {

  0%,
  12.5% {
    background-position: 0% 0%, 0 0
  }

  12.6%,
  37.5% {
    background-position: 100% 0%, 0 0
  }

  37.6%,
  62.5% {
    background-position: 100% 100%, 0 0
  }

  62.6%,
  87.5% {
    background-position: 0% 100%, 0 0
  }

  87.6%,
  100% {
    background-position: 0% 0%, 0 0
  }
}

.loader-l28 {
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  clip-path: inset(-220%);
  animation: l28 2s infinite linear;
}

@keyframes l28 {
  0% {
    box-shadow: 0 0 0 0, 40px 0, -40px 0, 0 40px, 0 -40px
  }

  10% {
    box-shadow: 0 0 0 0, 12px 0, -40px 0, 0 40px, 0 -40px
  }

  20% {
    box-shadow: 0 0 0 4px, 0px 0, -40px 0, 0 40px, 0 -40px
  }

  30% {
    box-shadow: 0 0 0 4px, 0px 0, -12px 0, 0 40px, 0 -40px
  }

  40% {
    box-shadow: 0 0 0 8px, 0px 0, 0px 0, 0 40px, 0 -40px
  }

  50% {
    box-shadow: 0 0 0 8px, 0px 0, 0px 0, 0 12px, 0 -40px
  }

  60% {
    box-shadow: 0 0 0 12px, 0px 0, 0px 0, 0 0px, 0 -40px
  }

  70% {
    box-shadow: 0 0 0 12px, 0px 0, 0px 0, 0 0px, 0 -12px
  }

  80% {
    box-shadow: 0 0 0 16px, 0px 0, 0px 0, 0 0px, 0 0px
  }

  90%,
  100% {
    box-shadow: 0 0 0 0, 40px 0, -40px 0, 0 40px, 0 -40px
  }
}