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

Name	Type	Default	Description
`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.

This component uses $$restProps.

All unused props will be passed through to the underlying svg element as regular attributes.

More Info

Slots

None

Events

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

Dispatched Events

Name	Detail
`change`	None