Progress Indicator
Progress Indicator provide visual feedback to users about the status and completion rate of ongoing tasks within an application. This helps manage user expectations, reduces uncertainty during wait times, and keeps users informed about the overall progress of actions they initiate.
API Reference
| Prop | Type | Default |
|---|---|---|
variant | VariantTypes | primary |
label | string | - |
value | string | - |
min | number | - |
max | number | - |
circular | boolean | false |
withPercentage | boolean | false |
indeterminate | boolean | false |
Examples
Value
Variant
Circular
Usage
General Guidelines
Do's
- Choose the right indicator type, select from progress bar, spinner, or other indicator that suits the task duration and user expectations.
- Use a consistent style and behavior for progress indicators throughout the application. (e.g. use variant="primary").
Don'ts
- Don't use vague or misleading indicators, the progress indicator should accurately reflect actual progress.
- Don't create a false sense of progress, the indicator should reflect reality and avoid artificial progress bars.
Writing Guidelines
When to use
- Use when process takes time to complete and users might experience a wait.
- Use when users need to be informed about the status and duration of an ongoing task.
When not to use
- Don't use when tasks are instantaneous and don't require progress indication.
- Don't use when the progress is unpredictable or difficult to measure accurately.
Use Case
General Use Cases
Progress Indicator are typically use for showing a progress bar while uploading a large file.
Displaying a spinner while data is being loaded.
Digital Health Use Cases
For Digital Health Applications progress indicator can be used for visualizing progress towards a daily step goal with a progress bar.
Showing estimated time remaining for a medication refill request.
Accessibility Guidelines
- Add
aria-labelledbyto use it correctly, define an ID for the element you want to use as label and set the property to that ID. - Use
aria-valuenowto specifies the current value of the progress indicator. It should be a number betweenaria-valueminandaria-valuemax.