Skip to main content

Progress

StorybookView in Storybook

Explore interactive examples and all component variations in our Storybook.

The Progress component displays the completion progress of a task, typically displayed as a progress bar. Built on Radix UI, it provides accessibility features and smooth animations. Perfect for file uploads, form completion, loading states, and multi-step processes.

Basic Usage​

View in Storybook

Different Values​

Empty0%
Quarter25%
Half50%
Three Quarters75%
Complete100%

Custom Sizes​

Small (h-1)
Default (h-2)
Medium (h-3)
Large (h-4)
Extra Large (h-6)

Interactive Progress​

Progress0%

File Upload Progress​

File Uploads

document.pdfcomplete
100% complete
image.jpguploading
65% complete
video.mp4pending
0% complete

Multi-Step Form Progress​

Step 1 of 425% Complete

Personal Info

Content for step 1 would go here...

Personal Info
Contact Details
Preferences
Review & Submit

Indeterminate Progress​

Loading (no value)
Processing...

Properties​

Progress​

PropertyTypeDefaultDescription
valuenumber-The progress value (0-100).
maxnumber100The maximum progress value.
classNamestring-Additional CSS classes for custom styling.
getValueLabel(value: number, max: number) => string-Function to get the accessible value label.

Accessibility​

The Progress component includes comprehensive accessibility features:

  • ARIA Support - Uses proper ARIA attributes (role="progressbar")
  • Value Announcement - Screen readers announce current progress value
  • Label Support - Supports custom value labels for better context
  • Keyboard Navigation - Focusable when interactive
  • Visual Indicators - Clear visual progress representation

Common Use Cases​

The Progress component is perfect for:

  • File Uploads - Show upload progress for documents, images, videos
  • Form Completion - Multi-step forms and wizards
  • Loading States - Data fetching and processing indicators
  • Installation Progress - Software installation and updates
  • Task Completion - Project milestones and task tracking
  • Data Processing - Batch operations and data imports
  • Download Progress - File downloads and content loading

Best Practices​

  1. Provide Context - Always label what the progress represents
  2. Show Percentage - Display numerical progress when helpful
  3. Smooth Animations - Use transitions for better user experience
  4. Appropriate Sizing - Choose height based on importance and context
  5. Color Coding - Use colors to indicate different states (success, error, warning)
  6. Accessibility - Ensure progress is announced to screen readers
  7. Performance - Avoid too frequent updates that might cause performance issues
  8. Completion Feedback - Provide clear indication when progress is complete