Segmented Progress Bar: Pure CSS Loading Animation

Segmented Progress Bar

Ten separate blocks light up one at a time with a small springy pop, hold full for a beat, then switch off in the same order. Each block is one span with an --i index for its delay.

Also known as: step progress bar, block progress bar, chunked loading bar.

Color Size 64px Dark background

HTML

<div class="ldr-segmented-progress-bar" role="progressbar" 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>
</div>

CSS

.ldr-segmented-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  gap: calc(var(--s) / 12);
  width: calc(var(--s) * 6);
}
.ldr-segmented-progress-bar span {
  position: relative;
  flex: 1;
  height: calc(var(--s) / 3.5);
  border-radius: calc(var(--s) / 16);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
}
.ldr-segmented-progress-bar span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  opacity: 0;
  animation: ldr-segmented-progress-bar-light 3.6s calc(var(--i) * 0.15s) infinite;
}
@keyframes ldr-segmented-progress-bar-light {
  0%       { opacity: 0; transform: scaleY(0.3); animation-timing-function: cubic-bezier(0.3, 1.8, 0.6, 1); }
  5%       { opacity: 1; transform: scaleY(1); }
  60%      { opacity: 1; transform: scale(1); animation-timing-function: ease-in; }
  66%      { opacity: 0; transform: scale(0.8, 0.6); }
  100%     { opacity: 0; transform: scaleY(0.3); }
}

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

Segmented Progress Bar

HTML

CSS

Customizing this loader

Similar loaders