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
FluentProgress
For progress components which have a linear visual appearance, use <FluentProgress>. For progress implementations which are circular, use <FluentProgressRing>.
<FluentProgress> wraps the <fluent-progress> element, a web component implementation of a progress bar leveraging the Fluent UI design system.
Usage
@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<FluentProgress Min="0" Max="100" Value="75"></FluentProgress>
<h4>Paused</h4>
<FluentProgress Paused="true" Min="0" Max="100" Value="75"></FluentProgress>
Example
See the component in action with implementation examples at the Blazor demo site.