Stacked Progress Bar: Pure CSS Loading Animation

Stacked Progress Bar

A storage usage bar: four colored categories are measured in one at a time, pausing at each boundary, above a matching legend. The hues are rotated from your accent with relative oklch colors.

Also known as: storage usage bar, multi color progress bar, disk space meter.

Color Size 64px Dark background

HTML

<div class="ldr-stacked-progress-bar" role="progressbar" aria-label="Calculating storage">
  <span class="ldr-stacked-progress-bar-track"><span></span></span>
  <span class="ldr-stacked-progress-bar-legend"><span></span><span></span><span></span><span></span></span>
</div>

CSS

.ldr-stacked-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --c2: oklch(from var(--c) l c calc(h + 55));
  --c3: oklch(from var(--c) l c calc(h + 110));
  --c4: oklch(from var(--c) calc(l + 0.08) c calc(h + 165));
  --g: calc(var(--s) / 24);
  display: grid;
  gap: calc(var(--s) / 4);
  width: calc(var(--s) * 6);
}
@supports not (color: oklch(from red l c h)) {
  .ldr-stacked-progress-bar {
    --c2: color-mix(in oklch, var(--c), #a855f7);
    --c3: color-mix(in oklch, var(--c), #ec4899);
    --c4: color-mix(in oklch, var(--c), #f59e0b);
  }
}
.ldr-stacked-progress-bar-track {
  height: calc(var(--s) / 4);
  overflow: hidden;
  border-radius: calc(var(--s) / 10);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
}
.ldr-stacked-progress-bar-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
    var(--c) 0 calc(32% - var(--g)), transparent 0 32%,
    var(--c2) 0 calc(52% - var(--g)), transparent 0 52%,
    var(--c3) 0 calc(66% - var(--g)), transparent 0 66%,
    var(--c4) 0 76%, transparent 0);
  animation: ldr-stacked-progress-bar-measure 4.2s infinite;
}
.ldr-stacked-progress-bar-legend {
  display: flex;
  gap: calc(var(--s) / 3);
}
.ldr-stacked-progress-bar-legend span {
  --k: var(--c);
  width: calc(var(--s) * 0.95);
  height: calc(var(--s) / 6);
  background:
    radial-gradient(circle closest-side, var(--k) 90%, transparent) 0 50% / calc(var(--s) / 6) 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent) 0 0) 100% 50% / calc(100% - var(--s) / 4) 70% no-repeat;
}
.ldr-stacked-progress-bar-legend span:nth-child(2) { --k: var(--c2); width: calc(var(--s) * 0.8); }
.ldr-stacked-progress-bar-legend span:nth-child(3) { --k: var(--c3); width: calc(var(--s) * 1.1); }
.ldr-stacked-progress-bar-legend span:nth-child(4) { --k: var(--c4); width: calc(var(--s) * 0.7); }
@keyframes ldr-stacked-progress-bar-measure {
  0%       { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  18%, 24% { clip-path: inset(0 68% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  36%, 42% { clip-path: inset(0 48% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  52%, 58% { clip-path: inset(0 34% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  66%, 92% { clip-path: inset(0 24% 0 0); opacity: 1; }
  100%     { clip-path: inset(0 24% 0 0); opacity: 0; }
}

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

Stacked Progress Bar

HTML

CSS

Customizing this loader

Similar loaders