Progress Ring

Documentation for the Progress Ring component.

Usage

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

<ProgressRing 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 determines the percentage of the progress ring that is filled. It should be a number between 0 and 100.

Indeterminate

The indeterminate prop allows the progress ring to display an indeterminate state, which is useful when the progress cannot be determined.

Hide Rail

The hideRail prop allows the progress ring to hide the rail, which is a background track for the progress indicator.

Status

The status prop allows you to set the status of the progress ring for visual feedback. It accepts values such as 'paused' or 'error'.

Component Props

Name	Type	Description
value	number	The percentage of the progress ring that is filled.
min	number	The minimum value of the progress ring. Default is 0.
max	number	The maximum value of the progress ring. Default is 100.
size	number	The size of the progress ring in pixels. Default is 32.
indeterminate	boolean	If true, the progress ring displays an indeterminate state.
hideRail	boolean	If true, the progress ring hides the rail.
status	'paused' \| 'error'	The status of the progress ring, for example 'paused' or 'error'.
ref	SVGElement	The DOM reference to the SVG element.
railElement	SVGCircleElement	The DOM reference to the rail element.
trackElement	SVGCircleElement	The DOM reference to the track element.