Progress

Usage

Bits owns role="progressbar" and the aria-value* attributes. What it cannot invent is the name — a bar announced as just "progressbar, 40%" tells the user nothing about what is progressing. Always pass aria-label, or aria-labelledby pointing at a visible label.

Indeterminate

Pass value= when the duration is genuinely unknown and you get a travelling sliver instead of a fill. Use it honestly — reaching for indeterminate because measuring progress is inconvenient just hides information the user wanted.

Custom range

min and max define the range, and the fill is computed against it — values outside are clamped rather than overflowing the track.

Sizes and colors

Three track heights and the semantic tones, all driven by --sve-* tokens through currentColor.

Progress vs Meter

They look almost identical and mean different things. Progress reports advancement toward completion — it is expected to reach the end and then stop existing. Meter reports a static measurement inside a known range: disk usage, password strength, a score. A meter at 100% is not "finished", it is full.

That distinction is not cosmetic — it is the difference between role="progressbar" and role="meter", so assistive technology describes them differently.

Props

Plus every native <div> attribute via prop spreading. The indeterminate animation is disabled under prefers-reduced-motion, which leaves a visible bar rather than a moving one.