v138 · css
Multi-Step Progress
A multi-step progress bar built entirely with progress(). The CSS ::after pseudo-element's width is calc((100% - 32px) * progress(var(--current-step), 1, var(--total-steps))) — updating one custom property drives both the connector line and the percentage readout with zero JS layout math.
Feature detection: checking…
Flow:
Checkout flow
Step 1 of 4
0%
progress(var(--current-step), 1, var(--total-steps))
Cart review
Review the items in your cart before proceeding to payment.
Step 1 / 4
Jump to step:
Live CSS — computed values
/* The fill line uses a single math expression */
.step-track::after {
content: '';
width: calc(
(100% - 32px) * /* total track length */
progress(
var(--current-step), /* value being tracked */
1, /* range start */
var(--total-steps) /* range end */
)
);
/* progress() returns 0 at step 1, 1 at last step */
/* this demo keeps the value inside the configured range */
}
/* Percentage label — same function, different output */
.pct-label::after {
content: calc(
100% *
progress(var(--current-step), 1, var(--total-steps))
);
}