Spring Loader

<div class="ldr-spring" role="status" aria-label="Loading">
  <svg class="ldr-spring-coil" viewBox="0 0 20 60" preserveAspectRatio="none" aria-hidden="true">
    <polyline points="10,0 10,5 2,9 18,14 2,19 18,24 2,29 18,34 2,39 18,44 2,49 18,54 10,57 10,60" />
  </svg>
  <span class="ldr-spring-mass"></span>
</div>

.ldr-spring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 1.05);
}
.ldr-spring::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--s) / 14);
  border-radius: calc(var(--s) / 28);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
}
.ldr-spring-coil {
  position: absolute;
  top: calc(var(--s) / 14);
  left: 50%;
  width: calc(var(--s) * 0.34);
  height: calc(var(--s) * 0.66);
  margin-left: calc(var(--s) * -0.17);
  overflow: visible;
}
.ldr-spring-coil polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: calc(var(--s) / 22);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: ldr-spring-coil 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.ldr-spring-mass {
  position: absolute;
  top: calc(var(--s) / 14);
  left: 50%;
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.26);
  margin-left: calc(var(--s) * -0.22);
  border-radius: calc(var(--s) / 16);
  background: var(--c);
  animation: ldr-spring-mass 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes ldr-spring-coil {
  0%, 86%, 100% { transform: scaleY(0.7); }
  16% { transform: scaleY(1); }
  26% { transform: scaleY(0.46); }
  36% { transform: scaleY(0.88); }
  46% { transform: scaleY(0.58); }
  56% { transform: scaleY(0.78); }
  66% { transform: scaleY(0.65); }
  76% { transform: scaleY(0.72); }
}
@keyframes ldr-spring-mass {
  0%, 86%, 100% { transform: translateY(calc(var(--s) * 0.462)); }
  16% { transform: translateY(calc(var(--s) * 0.66)); }
  26% { transform: translateY(calc(var(--s) * 0.304)); }
  36% { transform: translateY(calc(var(--s) * 0.581)); }
  46% { transform: translateY(calc(var(--s) * 0.383)); }
  56% { transform: translateY(calc(var(--s) * 0.515)); }
  66% { transform: translateY(calc(var(--s) * 0.429)); }
  76% { transform: translateY(calc(var(--s) * 0.475)); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-spring, .ldr-spring *, .ldr-spring::before, .ldr-spring::after, .ldr-spring *::before, .ldr-spring *::after {
    animation-duration: 3s;
  }
}

Similar loaders