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.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.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.Custom Max Value
Use a custom
Max value for scenarios where the total is not 100, such as step-based workflows or file counts.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