Stepper Progress Bar: Pure CSS Loading Animation

Stepper Progress Bar

Four steps joined by connectors that fill one after another; each step pops as it becomes current and turns into a check once it is done. One registered @property drives every state.

Also known as: multi step progress bar, checkout progress steps, wizard step indicator.

Color Size 64px Dark background

HTML

<div class="ldr-stepper-progress-bar" role="progressbar" aria-label="Step progress">
  <span class="ldr-stepper-progress-bar-step" style="--i: 0"><span></span></span>
  <span class="ldr-stepper-progress-bar-line" style="--i: 0"></span>
  <span class="ldr-stepper-progress-bar-step" style="--i: 1"><span></span></span>
  <span class="ldr-stepper-progress-bar-line" style="--i: 1"></span>
  <span class="ldr-stepper-progress-bar-step" style="--i: 2"><span></span></span>
  <span class="ldr-stepper-progress-bar-line" style="--i: 2"></span>
  <span class="ldr-stepper-progress-bar-step" style="--i: 3"><span></span></span>
</div>

CSS

@property --ldr-stepper-progress-bar-t {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
.ldr-stepper-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) * 0.6);
  --b: calc(var(--s) / 16);
  --t: var(--ldr-stepper-progress-bar-t);
  display: flex;
  align-items: center;
  width: calc(var(--s) * 6);
  animation: ldr-stepper-progress-bar-run 4.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-stepper-progress-bar-step {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--b) color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  animation: ldr-stepper-progress-bar-pop 4.8s calc(var(--i) * 1.056s) infinite;
}
.ldr-stepper-progress-bar-step::before,
.ldr-stepper-progress-bar-step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.ldr-stepper-progress-bar-step::before {
  box-shadow: inset 0 0 0 var(--b) var(--c);
  background: radial-gradient(circle, var(--c) 0 26%, transparent 29%);
  opacity: clamp(0, calc((var(--t) - var(--i) + 0.05) * 20), 1);
}
.ldr-stepper-progress-bar-step::after {
  background: var(--c);
  opacity: clamp(0, calc((var(--t) - var(--i) - 0.95) * 20), 1);
}
.ldr-stepper-progress-bar-step > span {
  position: relative;
  z-index: 1;
  width: calc(var(--d) * 0.2);
  height: calc(var(--d) * 0.4);
  margin-top: calc(var(--d) * -0.08);
  border: solid #fff;
  border-width: 0 var(--b) var(--b) 0;
  transform: rotate(45deg);
  opacity: clamp(0, calc((var(--t) - var(--i) - 0.95) * 20), 1);
}
.ldr-stepper-progress-bar-line {
  position: relative;
  flex: 1;
  height: var(--b);
  margin: 0 calc(var(--s) / 10);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  overflow: hidden;
}
.ldr-stepper-progress-bar-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform-origin: left;
  transform: scaleX(clamp(0, calc(var(--t) - var(--i)), 1));
}
@keyframes ldr-stepper-progress-bar-run {
  0%        { --ldr-stepper-progress-bar-t: 0; opacity: 0; }
  4%        { opacity: 1; }
  8%        { --ldr-stepper-progress-bar-t: 0; }
  22%, 30%  { --ldr-stepper-progress-bar-t: 1; }
  44%, 52%  { --ldr-stepper-progress-bar-t: 2; }
  66%, 72%  { --ldr-stepper-progress-bar-t: 3; }
  82%, 90%  { --ldr-stepper-progress-bar-t: 4; opacity: 1; }
  98%, 100% { --ldr-stepper-progress-bar-t: 4; opacity: 0; }
}
@keyframes ldr-stepper-progress-bar-pop {
  0%, 12%, 100% { transform: scale(1); }
  4%            { transform: scale(1.22); }
  8%            { transform: scale(0.94); }
}

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

Stepper Progress Bar

HTML

CSS

Customizing this loader

Similar loaders