Progress

Displays an indicator showing the completion progress of a task.

When To Use

Use the Progress component when you need to:

Show the progress of a task or operation
Indicate loading state with determinate progress
Visualize the completion percentage of a multi-step process
Provide visual feedback for file uploads, form submissions, or data processing
Display progress toward a goal or target

Progress indicators help users understand how much of a task has been completed and how much remains.

Examples

Basic#

Indeterminate#

Loading... Please wait while we process your request.

With Value#

Uploading file...0%

Custom#

Default

Taller with rounded edges

Success

Warning

Error

Gradient

Props

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Accessibility

The Progress component follows accessibility best practices:

Uses appropriate ARIA attributes (role="progressbar")
Communicates current value and range to assistive technologies
Provides visual indication of progress for users who can see
Can be styled to meet color contrast requirements
Works with keyboard navigation and screen readers

Popover

Displays rich content in a portal, triggered by a button.

Radio Group

A set of checkable buttons where only one can be checked at a time.