Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ComponentReactregistry:ui3 dependencies

ProgressBar

progress-bar

The accent progress primitive: determinate fill, busy sweep, open-ended indicator, or segment accumulation against a tally.

Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

Pass `value` for a determinate fill, `busy` for work in flight, `indeterminate` for open-ended progress, or `count` for segment accumulation. `busy` and `indeterminate` are different claims: `indeterminate` means UNBOUNDED and draws a static dotted line, while `busy` means LOADING and sweeps an accent band over the track – pair `busy` with a `value` for a run whose stages are only partly countable, so the bar holds its fill through the stage that cannot report a count. Use `label` to expose role="progressbar", or `decorative` when adjacent text already conveys the value. It renders as spans, so it is valid inside a button, which is how the TabBar underline works.
4 other registries

Similar components

Other registries' take on progress-bar.

@whiskeyjack

More from @whiskeyjack