Registry Index

Search the catalog

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

ComponentReactregistry:componentSelf-contained

Progress Bar

progress-bar

A frosted-glass progress pill with technical-drawing leader lines bracketing a monospace readout. Three levels of chrome — full, bar, plain — and two fill styles: a 6px beam or a three-row dot matrix. Every surface property is themeable — fill (solid or gradient), stroke, backdrop blur, drop and inner shadow — with glass and opaque presets shipped for light and dark. All colours resolve to oklch(), and fillFilter dresses the gradient alone so a caller can animate the value without touching the type or the ticks.

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.

4 other registries

Similar components

Other registries' take on progress-bar.

@d2

More from @d2