Progress bar Preview

Progress bars communicate system information, like how much cloud storage someone is using in OneDrive, or task information, like how long until a download is complete.

Progress bars should only be used for tasks that take longer than a second. If you’re loading new content with a known structure that doesn’t block the UI, try a skeleton.

Loading...
Open in CodeSandbox
Progress bar storybook
React guidance

Properties

as

“div”
Default:
none

bar

The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

max

The maximum value, which indicates the task is complete. The ProgressBar bar will be full when value equals max .

number
Default:
1

shape

The shape of the bar and track.

“square” “rounded”
Default:
“rounded”

thickness

The thickness of the ProgressBar bar

“medium” “large”
Default:
“medium”

value

A decimal number between 0 and 1 (or between 0 and max if given), which specifies how much of the task has been completed.

If undefined (default), the ProgressBar will display an indeterminate state.

number
Default:
none