Progress

Linear progress indicator. Sizes: small, medium, large. Variants for success/warning/danger. Use for determinate progress (uploads, multi-step form progress). For indeterminate waits use Spinner.

a11y (built in): the track is the native <progress> element — implicit role=progressbar carrying value/max, with no ARIA and no JS controller behind it. Status variants only repaint the fill, so the state has to be readable from the adjacent label or value text, never from colour alone. A <progress> takes no name from a neighbouring <span>: give it an aria-label, or point aria-labelledby at the label row.

Usage: Drive it yourself — set the element's value (against max) from your upload or step logic and the CSS transition animates the fill; no events fire, and the .lb-progress-value readout is plain text you update in the same step. The labelled form composes .lb-progress-wrap → .lb-progress-label-row (.lb-progress-label + .lb-progress-value) above the <progress>, which takes one size modifier for track height plus an optional status modifier stacked on it. Inside .lb-progress-inline, leave the size modifier off — the wrapper sizes the mini track itself.

Progress Demo

Inline — mini track for table cells

.lb-progress-inline: value label + a short thick track (1.8rem × 8px). The progress-in-cell pattern — quotas, completion, capacity inside rows, toolbars, composer footers. Status variants apply as usual.