Progress

Linear progress bars for showing completion status and loading states

Basic Progress

Simple progress bars with different values

70%
Show Code

Progress Colors

Different color themes for various contexts

70%
Show Code

Progress Sizes

Different sizes for various use cases

70%
Show Code

Indeterminate Progress

Progress bars without specific progress value

70%
Show Code

Progress with Labels

Progress bars with value labels and descriptions

70%
Show Code

Usage Notes

  • Use appropriate colors to convey meaning (success for completion, error for failures)
  • Provide clear labels when showing specific progress values
  • Use indeterminate state when progress cannot be measured
  • Consider accessibility by providing aria-label or aria-describedby
  • Combine with text labels for better user experience
  • Use consistent sizing within the same interface