ProgressBar
Progress of a task towards done, such as an upload or an import. Leave out value while the length is unknown.
- ProgressBar
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ProgressBar
Uploading report.pdf2 MB of 4.4 MB
Preparing the export
ImportDone
BackupFailedThe disk was full at 62%.
Dark theme, ProgressBar
Uploading report.pdf2 MB of 4.4 MB
Preparing the export
ImportDone
BackupFailedThe disk was full at 62%.
High contrast theme, ProgressBar
Uploading report.pdf2 MB of 4.4 MB
Preparing the export
ImportDone
BackupFailedThe disk was full at 62%.
UsageLink to the section Usage
import { ProgressBar } from '@skribly/ui/feedback'<ProgressBar label="Uploading report.pdf" value={45} description="2 MB of 4.4 MB" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A progressbar role named by its label; description is linked as its description.
- Without a value it is indeterminate and has no aria-valuenow.
- A finished or failed state takes a status word with its icon.
- The indeterminate pulse stops under reduced motion.
- Announce the end of a long task with a toast.
This demo runs through axe in all three themes on every test run. See what the tests check.