Ferris Wheel Loader: Pure CSS Loading Animation

Ferris Wheel Loader

A spoked wheel turns on its A-frame while six cabins stay level, each counter-rotating by exactly the wheel's angle. Slow and friendly for longer waits.

Also known as: ferris wheel animation, rotating wheel loader, carnival wheel loader.

Color Size 64px Dark background

HTML

<div class="ldr-ferris-wheel" role="status" aria-label="Loading">
  <div class="ldr-ferris-wheel-wheel">
    <span style="--i: 0"></span><span style="--i: 1"></span><span style="--i: 2"></span>
    <span style="--i: 3"></span><span style="--i: 4"></span><span style="--i: 5"></span>
  </div>
</div>

CSS

.ldr-ferris-wheel {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 1.12);
}
.ldr-ferris-wheel::before,
.ldr-ferris-wheel::after {
  content: "";
  position: absolute;
  top: calc(var(--s) * 0.5);
  left: 50%;
  width: calc(var(--s) / 20);
  height: calc(var(--s) * 0.66);
  margin-left: calc(var(--s) / -40);
  border-radius: calc(var(--s) / 40);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  transform: rotate(24deg);
  transform-origin: 50% 0;
}
.ldr-ferris-wheel::after { transform: rotate(-24deg); }
.ldr-ferris-wheel-wheel {
  position: absolute;
  z-index: 1;
  top: calc(var(--s) * 0.05);
  left: 50%;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 0.9);
  margin-left: calc(var(--s) * -0.45);
  box-sizing: border-box;
  border: calc(var(--s) / 20) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--c) 0 calc(var(--s) / 16), transparent 0),
    linear-gradient(0deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 calc(50% + 1px), transparent 0),
    linear-gradient(60deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 calc(50% + 1px), transparent 0),
    linear-gradient(120deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 calc(50% + 1px), transparent 0);
  animation: ldr-ferris-wheel-turn 6s linear infinite;
}
.ldr-ferris-wheel-wheel span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(calc(var(--i) * 60deg)) translateY(calc(var(--s) * -0.42));
}
.ldr-ferris-wheel-wheel span::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--s) / -14);
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 8);
  border-radius: calc(var(--s) / 50) calc(var(--s) / 50) calc(var(--s) / 16) calc(var(--s) / 16);
  background: var(--c);
  transform-origin: 50% 0;
  animation: ldr-ferris-wheel-level 6s linear infinite;
}
@keyframes ldr-ferris-wheel-turn {
  to { transform: rotate(360deg); }
}
@keyframes ldr-ferris-wheel-level {
  from { transform: rotate(calc(var(--i) * -60deg)); }
  to   { transform: rotate(calc(var(--i) * -60deg - 360deg)); }
}

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

Tailwind CSS version

The same loader using only Tailwind's built-in animation utilities. No custom keyframes or config needed.

<div class="relative h-14 w-14" role="status" aria-label="Loading">
  <div class="absolute left-[27px] top-6 h-8 w-0.5 origin-top rotate-[24deg] bg-blue-500/40"></div>
  <div class="absolute left-[27px] top-6 h-8 w-0.5 origin-top -rotate-[24deg] bg-blue-500/40"></div>
  <div class="absolute left-1 top-0 h-12 w-12 animate-[spin_6s_linear_infinite] rounded-full border-2 border-blue-500/50">
    <div class="absolute left-[21px] top-0 h-full w-px bg-blue-500/40"></div>
    <div class="absolute left-[21px] top-0 h-full w-px rotate-[60deg] bg-blue-500/40"></div>
    <div class="absolute left-[21px] top-0 h-full w-px -rotate-[60deg] bg-blue-500/40"></div>
    <div class="absolute left-[19px] top-[19px] h-1.5 w-1.5 rounded-full bg-blue-500"></div>
  </div>
  <div class="absolute left-1 top-0 h-12 w-12 animate-[spin_6s_linear_infinite]">
    <div class="absolute left-[19px] top-0.5 h-2 w-2.5 origin-top animate-[spin_6s_linear_infinite_reverse] rounded-b bg-blue-500"></div>
  </div>
  <div class="absolute left-1 top-0 h-12 w-12 animate-[spin_6s_linear_infinite] [animation-delay:-1s]">
    <div class="absolute left-[19px] top-0.5 h-2 w-2.5 origin-top animate-[spin_6s_linear_infinite_reverse] rounded-b bg-blue-500 [animation-delay:-1s]"></div>
  </div>
  <div class="absolute left-1 top-0 h-12 w-12 animate-[spin_6s_linear_infinite] [animation-delay:-2s]">
    <div class="absolute left-[19px] top-0.5 h-2 w-2.5 origin-top animate-[spin_6s_linear_infinite_reverse] rounded-b bg-blue-500 [animation-delay:-2s]"></div>
  </div>
  <div class="absolute left-1 top-0 h-12 w-12 animate-[spin_6s_linear_infinite] [animation-delay:-3s]">
    <div class="absolute left-[19px] top-0.5 h-2 w-2.5 origin-top animate-[spin_6s_linear_infinite_reverse] rounded-b bg-blue-500 [animation-delay:-3s]"></div>
  </div>
  <div class="absolute left-1 top-0 h-12 w-12 animate-[spin_6s_linear_infinite] [animation-delay:-4s]">
    <div class="absolute left-[19px] top-0.5 h-2 w-2.5 origin-top animate-[spin_6s_linear_infinite_reverse] rounded-b bg-blue-500 [animation-delay:-4s]"></div>
  </div>
  <div class="absolute left-1 top-0 h-12 w-12 animate-[spin_6s_linear_infinite] [animation-delay:-5s]">
    <div class="absolute left-[19px] top-0.5 h-2 w-2.5 origin-top animate-[spin_6s_linear_infinite_reverse] rounded-b bg-blue-500 [animation-delay:-5s]"></div>
  </div>
</div>

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Ferris Wheel Loader

HTML

CSS

Tailwind CSS version

Customizing this loader

Similar loaders