Progress Bar

Documentation for the Progress Bar component.

Usage

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

<ProgressBar value={50} />

Component API

A brief explanation of the props that really need explaining. You can see the rest of the props in the Component Props section below.

Value

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

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.

Hide Rail

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

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.

Component Props

Name	Type	Description
value	bindable number | undefined	The current progress value of the bar, between 0 and 100.
indeterminate	boolean	If true, the progress bar enters an indeterminate state.
hideRail	boolean	If true, the progress bar rail is hidden.
status	'paused' | 'error'	The current status of the progress bar.
element	bindable SVGElement	The DOM reference of the progress bar element.
railElement	bindable SVGRectElement	The DOM reference of the rail element.
trackElement	bindable SVGRectElement	The DOM reference of the track element.
secondaryTrackElement	bindable SVGRectElement	The DOM reference of the secondary track element.