Components
Progress
An accessible progress component that supports simple progress bars, labeled progress, and multi-progress use cases.
Introduction
The Progress component provides a sleek and accessible way to visualize completion states. It supports basic progress bars, labeled progress, and multi-progress implementations.
Default Use Cases
Progress with Label
Progress with Label
60%
Installation
Install the Progress component:
File Structure
Multi-Progress
Multi-Progress
Prop Types
| Prop | Type | Default |
|---|---|---|
value | number | - |
className | string | - |
Features
- Dynamic Progress:
- Visualize completion states with dynamic progress bars.
- Label Support:
- Display progress values with percentages or other labels.
- Multi-Progress Support:
- Stack multiple progress bars for advanced use cases.
- Customizable:
- Style and configure to match your application’s design.
Accessibility
- Keyboard Navigation:
- Easily focus and interact with progress elements via
Tab.
- Easily focus and interact with progress elements via
- Screen Reader Support:
- Includes ARIA roles and properties like
aria-valuenowto convey progress information to assistive technologies.
- Includes ARIA roles and properties like
- Dynamic Updates:
- Ensure screen readers are notified of real-time progress updates.
Conclusion
The Progress component is a versatile and accessible tool for visualizing progress in your application. With built-in ARIA support and customization options, it’s ideal for modern web apps.