Progress Bar

Visual indicators for displaying the progress of a task or operation, available in both linear and circular variants.

Linear Progress - Variants

Primary (default)

Success

Warning

Error

Linear Progress - Sizes

Small

Medium (default)

Large

With Label and Percentage

Upload Progress30%

Indeterminate Progress

Use indeterminate when progress cannot be calculated

Different variants

Circular Progress - Variants

60%

Primary

100%

Success

75%

Warning

45%

Error

Circular Progress - Sizes

60%

Small

60%

Medium

60%

Large

Interactive Circular Progress

60%

Circular Indeterminate

Processing

ProgressBar Props

Name	Type	Default	Description
`value`	`number`	-	Progress value (percentage, 0-100)
`variant`	`'primary' \| 'success' \| 'warning' \| 'error'`	`'primary'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the progress bar
`showLabel`	`boolean`	`false`	Whether to show label text
`showPercentage`	`boolean`	`false`	Whether to show percentage
`label`	`string`	-	Label text to display
`indeterminate`	`boolean`	`false`	Show indeterminate animation

CircularProgress Props

Name	Type	Default	Description
`value`	`number`	`0`	Progress value (percentage, 0-100)
`variant`	`'primary' \| 'success' \| 'warning' \| 'error'`	`'primary'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of circular progress
`showPercentage`	`boolean`	`false`	Show percentage in center
`indeterminate`	`boolean`	`false`	Show spinning animation

Usage Guidelines

When to use

•For file uploads, downloads, or data processing operations
•When showing completion of multi-step processes or forms
•Use linear progress for horizontal layouts and longer durations
•Use circular progress for compact spaces or shorter operations
•Use indeterminate when duration or progress cannot be calculated

Best practices

•Always provide clear labels describing what is in progress
•Show percentage when users need precise progress information
•Use success variant when task completes successfully
•Use error variant to indicate failed operations
•Use warning variant for operations that need attention
•Update progress smoothly to avoid jarring jumps

Accessibility

•Uses ARIA role progressbar for determinate progress
•Uses ARIA role status for indeterminate progress
•Includes aria-valuenow, aria-valuemin, aria-valuemax attributes
•Screen readers announce progress updates automatically
•Combines color with text percentage for accessibility

Do's and Don'ts

✓ Do

•Provide clear labels describing what is in progress
•Use indeterminate when progress cannot be calculated
•Show percentage for operations where precision matters
•Use success variant to confirm completed operations
•Choose circular for compact spaces, linear for wider layouts

Upload Complete100%

✗ Don't

•Don't show progress without explaining what is happening
•Don't use determinate progress when duration is unknown
•Don't let progress bar jump backwards or freeze at 99%
•Don't use progress bars for instant operations
•Don't hide progress indicators before users see completion