edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Progress

Progress bar with determinate and indeterminate states.

Componentsdocsbase-ui/progress

Installation

npx shadcn@latest add https://ui.edbn.me/r/progress.json

Manual

API Reference

Root

Groups all parts of the progress bar. Renders a div element.

valuenumber | null
=null

Current value (null = indeterminate)

minnumber
=0

Minimum value

maxnumber
=100

Maximum value

getAriaValueTextfunction

Function returning aria-valuetext

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root data attributes
AttributeDescription
data-completePresent when value === max
data-indeterminatePresent when value is null
data-progressingPresent when value > 0 and < max
Root CSS variables
VariableDescription
--progress-valueNormalized value between 0 and 1

Track

The background track for the progress bar. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Indicator

The filled indicator showing progress. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Label

An accessible label for the progress bar. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function