Feedback
Progress Indicators
Progress indicators inform users about the status of ongoing processes by providing visual feedback about the progress of a task or operation.
Examples
25%
50%
75%
100%
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- role="progressbar" for proper semantic meaning (WCAG 4.1.2)
- aria-valuenow attribute for current progress value
- aria-valuemin="0" and aria-valuemax="100" for value range
- aria-label for descriptive progress context
- Indeterminate state omits aria-valuenow as value is unknown
- Color is not the only indicator - value shown via bar width/arc
- Sufficient color contrast for progress bars (WCAG 1.4.3)
- Percentage labels provide alternative non-visual progress indication
When to use this component
✓Do's
- •File upload progress
- •Form completion percentage
- •Long-running operations
- •When users need visibility into the progress of a task
✗Don'ts
- •For brief loading states, use a Spinner.
- •For step-by-step workflows, use a Stepper.
- •For status or completion states, use a Badge or Tag.
- • For background tasks that don't require user attention, avoid showing a Progress Indicator.
Do's and Don'ts
✓ Do's
Uploading Aadhaar...65%
Show progress bars for file uploads and known-duration operations.
✗ Don'ts
Don't use progress bars for brief operations under 2 seconds, use Spinner.