Progress Ring

Progress and progress ring are used to display the length of time a process will take or to visualize percentage value (referred to as a determinate state) and to represent an unspecified wait time (referred to as an indeterminate state). Progress components are typically visually represented by a circular or linear animation. When the value attribute is passed the state is determinate, otherwise it is indeterminate.

fluent-progress-ring

For progress components which have a linear visual appearance, use fluent-progress. For progress implementations which are circular, use fluent-progress-ring.

Setup

import {
    provideFluentDesignSystem,
    fluentProgressRing
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentProgressRing()
    );

Customizing indicators

import {
    provideFluentDesignSystem,
    fluentProgressRing
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentProgressRing({
            indeterminateIndicator: `...your indeterminate indicator...`
        })
    );

Example

Please see the Blazor documentation and demo site for more information.

Additional Resources

See also progress W3C Component Aria Practices