Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Progress
A headless progress bar primitive with ARIA progressbar role. Supports determinate and indeterminate states.
Determinate
A determinate progress bar with a set value. Use
Value and Max to control the progress percentage.
Loading example…
Indeterminate
An indeterminate progress bar with no set value. When
Value is null, the progress is indeterminate and aria-valuenow is omitted. Use CSS animations for a pulsing or sliding effect.
Loading example…
Custom Value Label
Use
GetValueLabel to provide a custom human-readable label for screen readers. The function receives (value, max) and should return a descriptive string.
Loading example…
Custom Max Value
Use a custom
Max value for scenarios where the total is not 100, such as step-based workflows or file counts.
Loading example…
Data Attributes
Use these data attributes for CSS styling:
[data-state="complete"]- When value equals max[data-state="indeterminate"]- When value is null[data-state="loading"]- When value is between 0 and max[data-value]- The current progress value[data-max]- The maximum progress value