/* HTML: <div class="loader"></div> 
.loader {
  width: 65px;
  height: 30px;
  position: relative;
}
.loader:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 3px inset #fff;
  animation: l3 0.75s infinite alternate;
}
@keyframes l3 {
  0% {
    inset: 0 35px 0 0;
  }
  50% {
    inset: 0 0 0 0;
  }
  100% {
    inset: 0 0 0 35px;
  }
}*/

/* HTML: <div class="loader"></div> 

.div-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  width: 15px;
  aspect-ratio: 1;
  position: absolute;
}
.loader:before,
.loader:after {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 3px inset #fff;
  animation: l4 2.5s infinite;
}
.loader:after {
  animation-delay: -1.25s;
}
@keyframes l4 {
  0% {
    inset: 0 35px 35px 0;
  }
  12.5% {
    inset: 0 35px 0 0;
  }
  25% {
    inset: 35px 35px 0 0;
  }
  37.5% {
    inset: 35px 0 0 0;
  }
  50% {
    inset: 35px 0 0 35px;
  }
  62.5% {
    inset: 0 0 0 35px;
  }
  75% {
    inset: 0 0 35px 35px;
  }
  87.5% {
    inset: 0 0 35px 0;
  }
  100% {
    inset: 0 35px 35px 0;
  }
}*/

/* HTML: <div class="loader"></div> 
.loader {
  height: 50px;
  aspect-ratio: 2;
  border: 10px solid #000;
  box-sizing: border-box;
  background: 
    radial-gradient(farthest-side,#fff 98%,#0000) left/20px 20px,
    radial-gradient(farthest-side,#fff 98%,#0000) left/20px 20px,
    radial-gradient(farthest-side,#fff 98%,#0000) center/20px 20px,
    radial-gradient(farthest-side,#fff 98%,#0000) right/20px 20px,
    #000;
  background-repeat: no-repeat;
  filter: blur(4px) contrast(10);
  animation: l14 1s infinite;
}
@keyframes l14 {
  100%  {background-position:right,left,center,right}
}*/

/* HTML: <div class="loader"></div>
.loader {
  color: #000;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: l21 .5s infinite alternate linear;
}

@keyframes l21 {
  50%  {box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px}
  100% {box-shadow: 19px 0 0 0  , 38px 0 0 3px, 57px 0 0 7px}
}*/

/* HTML: <div class="loader"></div> 
.loader {
  width: 85px;
  height: 50px;
  --g1: conic-gradient(from 90deg at left 3px top 3px, #0000 90deg, #fff 0);
  --g2: conic-gradient(from -90deg at bottom 3px right 3px, #0000 90deg, #fff 0);
  background: var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2);
  background-position: left, center, right;
  background-repeat: no-repeat;
  animation: l9 1s infinite;
}

@keyframes l9 {
  0% {
    background-size: 25px 50%, 25px 50%, 25px 50%
  }

  25% {
    background-size: 25px 100%, 25px 50%, 25px 50%
  }

  50% {
    background-size: 25px 50%, 25px 100%, 25px 50%
  }

  75% {
    background-size: 25px 50%, 25px 50%, 25px 100%
  }

  100% {
    background-size: 25px 50%, 25px 50%, 25px 50%
  }
}*/
/* HTML: <div class="loader"></div> */

.loader {
  height: 18px;
  aspect-ratio: 2.5;
  --_g: no-repeat radial-gradient(farthest-side, #ffffff 90%, #ffffff00);
  background: var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 20% 50%;
  animation: l43 1s infinite linear;
}

@keyframes l43 {
  0% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
  }

  16.67% {
    background-position: calc(0*100%/3) 0, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
  }

  33.33% {
    background-position: calc(0*100%/3) 100%, calc(1*100%/3) 0, calc(2*100%/3) 50%, calc(3*100%/3) 50%
  }

  50% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 100%, calc(2*100%/3) 0, calc(3*100%/3) 50%
  }

  66.67% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 100%, calc(3*100%/3) 0
  }

  83.33% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 100%
  }

  100% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
  }
}