Rolling Wheel Cycloid Loader: Pure CSS Loading Animation

Rolling Wheel Cycloid Loader

A wheel rolls along a moving road while a point on its rim leaves a trail of dots that draws the cycloid arch. Every trail dot is the rim point from a moment ago, shifted back by the road.

Also known as: cycloid animation, rolling wheel loader, wheel trace animation.

Color Size 64px Dark background

HTML

<div class="ldr-cycloid" role="status" aria-label="Loading">
  <span class="ldr-cycloid-wheel"></span>
  <span class="ldr-cycloid-trace" style="--k: 0"></span>
  <span class="ldr-cycloid-trace" style="--k: 1"></span>
  <span class="ldr-cycloid-trace" style="--k: 2"></span>
  <span class="ldr-cycloid-trace" style="--k: 3"></span>
  <span class="ldr-cycloid-trace" style="--k: 4"></span>
  <span class="ldr-cycloid-trace" style="--k: 5"></span>
  <span class="ldr-cycloid-trace" style="--k: 6"></span>
  <span class="ldr-cycloid-trace" style="--k: 7"></span>
  <span class="ldr-cycloid-trace" style="--k: 8"></span>
  <span class="ldr-cycloid-trace" style="--k: 9"></span>
  <span class="ldr-cycloid-trace" style="--k: 10"></span>
  <span class="ldr-cycloid-trace" style="--k: 11"></span>
</div>

CSS

.ldr-cycloid {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.9);
  height: calc(var(--s) * 0.62);
}
.ldr-cycloid::after {
  content: "";
  position: absolute;
  top: calc(var(--s) * 0.57);
  left: 0;
  right: 0;
  height: calc(var(--s) / 24);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 calc(var(--s) * 0.16), transparent 0 calc(var(--s) * 0.2618));
  animation: ldr-cycloid-road 0.2s linear infinite;
}
.ldr-cycloid-wheel {
  position: absolute;
  top: calc(var(--s) * 0.06);
  left: calc(var(--s) * 1.3);
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) * 0.5);
  box-sizing: border-box;
  border: calc(var(--s) / 24) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(0deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 0 calc(50% + 1px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 0 calc(50% + 1px), transparent 0);
  animation: ldr-cycloid-roll 1.2s linear infinite;
}
/* Trace k shows the rim point from k tenths of a second ago, moved back with the road. */
.ldr-cycloid-trace {
  --d: calc(var(--s) * (0.12 - var(--k) * 0.006));
  position: absolute;
  top: calc(var(--s) * 0.31);
  left: calc(var(--s) * (1.55 - var(--k) * 0.1309));
  animation: ldr-cycloid-roll 1.2s linear infinite;
  animation-delay: calc(var(--k) * 0.1s - 1.2s);
}
.ldr-cycloid-trace::before {
  content: "";
  position: absolute;
  top: calc(var(--s) * 0.25 - var(--d) / 2);
  left: calc(var(--d) / -2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--k) * 0.075);
}
@keyframes ldr-cycloid-roll {
  to { transform: rotate(360deg); }
}
@keyframes ldr-cycloid-road {
  to { background-position: calc(var(--s) * -0.2618) 0; }
}

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

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.

Rolling Wheel Cycloid Loader

HTML

CSS

Customizing this loader

Similar loaders