Progress

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

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,
    fluentProgress,
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentProgress(),
    );

Customizing indicators

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

provideFluentDesignSystem()
    .register(
        fluentProgress({
            indeterminateIndicator1: `...your indeterminate indicator...`,
            indeterminateIndicator2: `...your indeterminate indicator...`
        }),
    );

Example

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

Additional Resources

See also progress-ring W3C Component Aria Practices