ProgressRing

Edit This Page

ProgressRing provides visual feedback to to the user that a long-running operation is underway. It can mean that the user cannot interact with the app when the progress indicator is visible, and can also indicate how long the wait time might be.

import { ProgressRing } from "fluent-svelte";

Usage

Completion Value

The value property takes in a number between 0 to 100 that represents the percentage of a task that is completed.

<ProgressRing value={50} />

ProgressRings have two primary states - determinate and indeterminate.

A ProgressRing is indeterminate under the following conditions:

  • No value is provided.
  • A value is passed in, but it is undefined, null, or NaN.

A determinate ProgressRing displays a completion percentage by filling the ring gradually, while an indeterminate ProgressRing plays a looping spinner animation.

Size

You can control the diameter of the ring in pixels by setting the size property. The default size is 32.

<ProgressRing size={64} />

Component API

API docs automatically generated by sveld and vite-plugin-sveld.

Props

NameTypeDefaultDescription
value Unknown undefined Determines a completion amount in percentage (0-100). If no value or an invalid value is provided, the ring will be indeterminate.
size number 32 The size (diameter) of the ring in pixels.
element null | HTMLElement null Obtains a bound DOM reference to the ring's SVG element.
circleElement null | HTMLElement null Obtains a bound DOM reference to the ring's fill circle element.

Slots

None

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

NameDetail
change None