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.
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.
Examples
Default
Default
Stroke and Color
Stroke and Color
30
Paused
Paused
Documentation
FluentProgress Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
BackgroundColor | string? | Gets or sets the color to be used for the background. If not set, the default theme color is used. | |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Color | string? | Gets or sets the color to be used for the progress bar. If not set, the default theme color is used. | |
Max | int? | Gets or sets the maximum value. | |
Min | int? | Gets or sets the minimum value. | |
Paused | bool? | Gets or sets a value indicating whether the progress element is paused. | |
Stroke | ProgressStroke | Normal | Gets or sets the stroke width of the progress bar. If not set, the default theme stroke width is used. |
Value | int? | Gets or sets the current value. | |
Visible | bool | True | Gets or sets the visibility of the component |
Width | string? | Gets or sets the component width. |