Progress Bar

A progress bar is a horizontal indicator that communicates the progress of an operation. Set value for determinate progress, or omit it for an indeterminate animation when the duration is unknown.

Usage

<script>
  import { ProgressBar } from 'fluentui-svelte';
</script>

<ProgressBar value={50} />

Value

The value prop sets the current progress value of the bar. It should be a number between 0 and 100.

View Code

<ProgressBar value={30} />
<ProgressBar value={50} />
<ProgressBar value={70} />

Indeterminate

If you do not set the value prop, the progress bar enters an indeterminate state, meaning it does not have a specific value. This is useful for operations where the duration is unknown.

View Code

<ProgressBar indeterminate />

Hide Rail

The hideRail prop can be used to hide the progress bar rail.

View Code

<ProgressBar value={50} hideRail />

Status

The status prop allows you to set the status of the progress bar to 'paused' or 'error'. This changes the color of the progress bar to indicate different states.

View Code

<ProgressBar value={50} status="paused" />
<ProgressBar value={50} status="error" />

Component Props

Name	Type	Default	Description
`value` bindable	`number` \| `null`		The current value of the progress bar. Leave it unset for an indeterminate bar.
`class`	`string`		The class to apply to the progress bar.
`ref` bindable	`SVGElement`		The DOM reference of the progress bar element.
`min`	`number`	`0`	The minimum value of the progress bar.
`max`	`number`	`100`	The maximum value of the progress bar.
`hideRail`	`boolean`		Whether to hide the rail element.
`railElement` bindable	`SVGRectElement`		The DOM reference of the rail element.
`secondaryTrackElement` bindable	`SVGRectElement`		The DOM reference of the secondary track element, used while indeterminate.
`trackElement` bindable	`SVGRectElement`		The DOM reference of the track element.
`status`	`'paused'` \| `'error'`		The current status of the progress bar, which recolors the track.
Element Attributes