Components · progress
Progress. Six shapes, four tones.
Linear bars, circular rings, segmented steps, indeterminate loops. Tones for primary/success/warning/danger plus a multi-color gradient.
01 · base
.lsd-progress
Linear bar by default. Set --lsd-pct as inline style to drive the fill.
sizes
sm / md / lg
Height scales.
<div class="lsd-progress lsd-progress--linear"
style="--lsd-pct: 60%;">
<span class="lsd-progress__bar"></span>
</div>tones
primary / success / warning / danger
Fill color via --p-fill.
.lsd-progress--primary .lsd-progress--success
interactive
Live demo
Buttons animate the fill.
el.style.setProperty('--lsd-pct','50%')02 · variants
Six shapes
.lsd-progress--linear
Linear
Classic bar.
.lsd-progress--linear
.lsd-progress--circular
Circular ring
SVG ring with stroke-dashoffset.
72%
.lsd-progress--circular
.lsd-progress--segmented
Segmented (4 steps)
Step indicator — wizard or pagination.
.lsd-progress--segmented
.lsd-progress--indeterminate
Indeterminate loop
Continuous animation — no known total.
.lsd-progress--indeterminate
.lsd-progress--with-label
With % label
Inline percentage next to the bar.
64%
.lsd-progress-row + span label
.lsd-progress--multi-color
Gradient fill
Accent gradient — useful for hue-shift level indicators.
.lsd-progress--multi-color
03 · animations
Width transition
Driven by CSS transition: width — no JS animation loop. Reduced-motion users get instant updates.
demo
Click to fill
Press the button to drive progress.
--lsd-pct: 0% → 100%
Components · LSD primitives