Twisting Ribbon Loader: Pure CSS Loading Animation

Twisting Ribbon Loader

Sixteen thin bars turn on the horizontal axis with a phase offset, so together they read as a ribbon twisting in 3D, solid on the front and pale on the back. One linear keyframe, sixteen delays.

Also known as: helix bars loader, twisted bars animation, 3d wave bars.

Color Size 64px Dark background

HTML

<div class="ldr-twisting-ribbon" role="status" aria-label="Loading">
  <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><span style="--i: 6"></span><span style="--i: 7"></span>
  <span style="--i: 8"></span><span style="--i: 9"></span><span style="--i: 10"></span><span style="--i: 11"></span>
  <span style="--i: 12"></span><span style="--i: 13"></span><span style="--i: 14"></span><span style="--i: 15"></span>
</div>

CSS

.ldr-twisting-ribbon {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 36);
  height: var(--s);
}
.ldr-twisting-ribbon span {
  position: relative;
  width: calc(var(--s) / 14);
  height: calc(var(--s) * 0.8);
  transform-style: preserve-3d;
  animation: ldr-twisting-ribbon-twist 2.4s linear infinite;
  animation-delay: calc(var(--i) * 0.15s - 2.4s);
}
.ldr-twisting-ribbon span::before,
.ldr-twisting-ribbon span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--s);
  background: var(--c);
  backface-visibility: hidden;
}
.ldr-twisting-ribbon span::after {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  transform: rotateX(180deg);
}
@keyframes ldr-twisting-ribbon-twist {
  to { transform: rotateX(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-twisting-ribbon, .ldr-twisting-ribbon *, .ldr-twisting-ribbon::before, .ldr-twisting-ribbon::after, .ldr-twisting-ribbon *::before, .ldr-twisting-ribbon *::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.

Twisting Ribbon Loader

HTML

CSS

Customizing this loader

Similar loaders