Yo-Yo Loader

<div class="ldr-yo-yo" role="status" aria-label="Loading">
  <span class="ldr-yo-yo-string"></span>
  <span class="ldr-yo-yo-disc"></span>
</div>

.ldr-yo-yo {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.6);
  height: calc(var(--s) * 1.1);
}
.ldr-yo-yo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) * 0.3);
  height: calc(var(--s) / 10);
  margin-left: calc(var(--s) * -0.15);
  border-radius: calc(var(--s) / 20);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
}
.ldr-yo-yo-string {
  position: absolute;
  top: calc(var(--s) / 20);
  left: 50%;
  width: 1px;
  height: calc(var(--s) * 0.82);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
  transform-origin: 50% 0;
  animation: ldr-yo-yo-string 1.6s infinite;
}
.ldr-yo-yo-disc {
  --slot: color-mix(in srgb, var(--c) 40%, #fff);
  position: absolute;
  top: calc(var(--s) / 20);
  left: 50%;
  width: calc(var(--s) * 0.38);
  height: calc(var(--s) * 0.38);
  margin: calc(var(--s) * -0.19) 0 0 calc(var(--s) * -0.19);
  animation: ldr-yo-yo-drop 1.6s infinite;
}
.ldr-yo-yo-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: calc(var(--s) / 24) solid var(--c);
  border-radius: 50%;
  background: conic-gradient(var(--c) 0 19%, var(--slot) 0 25%, var(--c) 0 44%, var(--slot) 0 50%, var(--c) 0 69%, var(--slot) 0 75%, var(--c) 0 94%, var(--slot) 0);
  animation: ldr-yo-yo-spin 0.45s linear infinite;
}
.ldr-yo-yo-disc::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(var(--s) / 40) var(--slot);
}
@keyframes ldr-yo-yo-drop {
  0%   { transform: translateY(calc(var(--s) * 0.22)); animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.5); }
  44%  { transform: translateY(calc(var(--s) * 0.82)); animation-timing-function: ease-out; }
  50%  { transform: translateY(calc(var(--s) * 0.77)); animation-timing-function: ease-in; }
  56%  { transform: translateY(calc(var(--s) * 0.82)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); }
  100% { transform: translateY(calc(var(--s) * 0.22)); }
}
@keyframes ldr-yo-yo-string {
  0%   { transform: scaleY(0.268); animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.5); }
  44%  { transform: scaleY(1); animation-timing-function: ease-out; }
  50%  { transform: scaleY(0.939); animation-timing-function: ease-in; }
  56%  { transform: scaleY(1); animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); }
  100% { transform: scaleY(0.268); }
}
@keyframes ldr-yo-yo-spin {
  to { transform: rotate(360deg); }
}

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

Similar loaders