Spinning Top Loader

<div class="ldr-spinning-top" role="status" aria-label="Loading">
  <span class="ldr-spinning-top-body"></span>
</div>

.ldr-spinning-top {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.9);
  height: var(--s);
}
.ldr-spinning-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) / 12);
  margin-left: calc(var(--s) * -0.25);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  animation: ldr-spinning-top-shadow 1.2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-spinning-top-body {
  position: absolute;
  bottom: calc(var(--s) / 24);
  left: 50%;
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 0.84);
  margin-left: calc(var(--s) * -0.35);
  transform-origin: 50% 100%;
  animation: ldr-spinning-top-wobble 1.2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-spinning-top-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) / 10);
  height: calc(var(--s) * 0.2);
  margin-left: calc(var(--s) / -20);
  border-radius: calc(var(--s) / 40);
  background: var(--c);
}
.ldr-spinning-top-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  background: repeating-linear-gradient(90deg, var(--c) 0 calc(var(--s) * 0.09), color-mix(in srgb, var(--c) 55%, #fff) 0 calc(var(--s) * 0.18));
  clip-path: polygon(50% 100%, 0 40%, 4% 26%, 14% 14%, 30% 5%, 50% 2%, 70% 5%, 86% 14%, 96% 26%, 100% 40%);
  animation: ldr-spinning-top-spin 0.3s linear infinite;
}
@keyframes ldr-spinning-top-spin {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--s) * 0.18) 0; }
}
@keyframes ldr-spinning-top-wobble {
  from { transform: translateX(calc(var(--s) * -0.05)) rotate(-8deg); }
  to   { transform: translateX(calc(var(--s) * 0.05)) rotate(8deg); }
}
@keyframes ldr-spinning-top-shadow {
  from { transform: translateX(calc(var(--s) * -0.05)) scaleX(0.9); }
  to   { transform: translateX(calc(var(--s) * 0.05)) scaleX(1.1); }
}

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

Similar loaders