Progress Bar

The Progress Bar component visually represents the completion state of a task or process.

Usage & Examples

default.tsx


<Progressbar value={65} />

Progress Bar props API
				Default	Description
`animated`	`boolean`	No	props	`true`	If true, applies an animated effect to the progress bar.
`aria-describedby`	`string`	No	aria	`—`	ID of the element that describes the progress bar. Useful for extra context or status messaging.
`aria-label`	`string`	No	aria	`"Progress"`	Accessible label for the progress bar. Use this when no visible label exists.
`aria-labelledby`	`string`	No	aria	`—`	ID of the element that labels the progress bar. Prefer this when there is a visible label in the UI.
`aria-valuetext`	`string`	No	aria	`—`	Custom accessible text for screen readers. Example: "Uploading 3 of 5 files"
`className`	`string`	No	styling	`—`	Optional additional class name(s) for custom styling.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`description`	`ReactNode`	No	props	`—`	Optional description content rendered for assistive technology.
`descriptionId`	`string`	No	props	`—`	Optional id applied to the description container. Useful when connecting the description with aria-describedby.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Applies a translucent frosted-glass treatment to the progress track.
`indeterminate`	`boolean`	No	props	`false`	If true, the progress bar shows an indeterminate animation. When true, the value prop is ignored.
`label`	`ReactNode`	No	props	`—`	Optional label describing what the progress represents. Example: "Uploading files", "Build progress"