Linear progress bar for determinate or indeterminate completion.
Install with the CLI, or copy the component source into your project.
Add progress (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add progress
Determinate fill at the default thickness.
sm and md bar thickness.
Omit value for a sliding wait indicator.
Linear progress bar for determinate completion or an indeterminate wait. Track uses muted; the fill uses foreground.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | number | - | Completeness from 0 to 100. Omit for an indeterminate sliding indicator. |
| size | "sm" | "md" | "md" | Bar thickness. |
| aria-label | string | "Progress" | Accessible name for the progressbar. |
| className | string | - | Additional styles. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-progress-height-sm | CSS length | calc(1 * var(--spacing-unit)) | sm bar thickness. |
| --df-progress-height-md | CSS length | calc(1.5 * var(--spacing-unit)) | md bar thickness. |
| --df-progress-duration | CSS time | var(--df-duration-fast) | Determinate width transition. |
| --df-progress-indeterminate-duration | CSS time | var(--df-duration-progress-indeterminate) | One indeterminate slide cycle. |
| --df-progress-indeterminate-width | CSS length | 40% | Sliding indicator width while indeterminate. |
| --df-progress-indeterminate-travel | CSS length | 350% | End translate distance for the indeterminate slide. |