Feedback
SLA Progress Indicator
An SLA progress indicator visually tracks the time remaining to fulfill a guaranteed service or task. It communicates progress and status through color and supporting information.
Examples
8days left
5days left
1days left
20days left
AccessibilityWCAG 2.1 Level AA Compliant
Features3 checks
- Uses role="progressbar" with aria-valuenow
- Color is supplemented with text labels
- Sufficient contrast for all states
When to use this component
✓Do's
- •Showing SLA time remaining for government services
- •Tracking processing deadlines on dashboards
- •Displaying elapsed time for pending applications
✗Don'ts
- •For generic progress bars, use Progress instead.
- •For loading states, use Spinner or Skeleton.
- •For step-based workflows, use StatusPipeline.
Do's and Don'ts
✓ Do's
72%
5 days remaining, Certificate processingShow both percentage and time remaining for clarity.
✗ Don'ts
?
Processing...Don't use without a concrete value, citizens need specific timelines.