Everything core ships for showing "how far along": the progress bar (with an optional caption row), the progress ring and the stacked bar. Play with the bar in the playground first, then compare the shapes below.
Playground
Generated markup
Progress bar: sizes
Progress bar: variants, striped, animated
Progress bar: theme palette (color-1 … color-9)
Progress bar with caption (pa-progress-group)
Progress ring
Stacked bar (a breakdown, not a progress)
Effects: indeterminate, shimmer, glow, flow
Phases (red → orange → yellow → green)
A phase = a colour + the value it starts at. The list lives in one CSS variable on the bar (--pa-progress-phases), written as ordinary gradient stops — so the colours are visible in the markup and any colour works: a role (var(--pc-danger-color)), a palette slot (var(--pc-palette-3)) or your own CSS variable — the yellow here is --our-yellow, defined by the app (this page), not by the framework. Mode smooth blends the stops, zoned writes them with hard edges, value paints the whole fill with the colour of the phase the value is in (that one is wrapper logic — CSS can't compare numbers; here a small script stands in for the wrapper).
Component call (svelte)
Component call (keen)
Generated HTML
Fixed examples
Segmented bar (one value, N blocks)
Vertical bar
Same pa-progress block plus --vertical: the fill grows from the bottom (--value is the height). Sizes set the bar's thickness; the length comes from --pa-progress-length (default 12rem). Every other modifier still applies — variants, palette, striped / animated, phases (bottom → top, like a thermometer).
Level meter (7 bars, live)
Experimental
The steppers below use core's pa-steps, shipped as experimental — class names and markup may still change. The long form with a sticky stepper lives on its own page now: Surfaces → Sections (pa-sections).
Multi-step form (stepper + segmented bar)
- 1Account
- 2Profile
- 3Billing
- 4Confirm
Vertical stepper as a status block (CNC job)
- 1Starting
- 2Homing axes
- 3Cutting
- 4Cleaning
- 5Finished
A read-only block: the machine reports which phase it is in. Done phases get a check, the running one pulses, a fault turns the step red with the reason underneath.