Code examples
<ProgressBar value={50} marginY={3} maxWidth="300px" />
Guidelines
Progress bars provide a more precise indication of how much remains to be loaded. They should be used in situations where it is important to give the user an accurate progress update. Examples include downloading large files, loading pages with heavy content, uploading files, or performing conversions.
If the waiting time is unknown, consider using a content loader or a spinner instead.
Accessibility
The Progressbar component uses the progressbar role, which allows assistive technologies such as screen readers to identify and announce it as a progress indicator.
To ensure users understand the purpose of the progress bar and the status it represents, it should always have an accessible label. The label should clearly describe what process is in progress, and when possible, provide the current progress value as well, so users can track their progress through the task.
Code
<ProgressBar />
import { ProgressBar } from "@vygruppen/spor-react";
Shows determinate progress
Props
Name | Type | Required? | Description |
|---|---|---|---|
value | number | Value between 0 and 100 (as a percentage) | |
label | string | string[] | Description of what's happening. If an array is passed, the texts are rotated every `labelRotationDelay`seconds | |
labelRotationDelay | number | Delay in milliseconds. Default 5000 (5 seconds) | |
aria-label | string | Required if you don't pass a label | |
height | string | Default 0.5rem | |
isActive | boolean | Defaults to true. Used to make the ProgressBar inactive. | |
showValueText | boolean | Used to display the percentage of progress completed in the progress bar |