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.
For progress components which have a linear visual appearance, use <FluentProgress>. For progress implementations which are circular,
use <FluentProgressRing>.
<FluentProgressRing> wraps the <fluent-progress-ring> element, a web component implementation of a progress ring leveraging the
Fluent UI design system.
Examples
Default
Default
Stroke and Color
Stroke and Color
30
Paused
Paused
Custom sizes
Custom Sizes
Documentation
FluentProgressRing Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
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 ring. 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 ring. If not set, the default theme stroke width is used. |
Value | int? | Gets or sets the current value . | |
Visible | bool | True | |
Width | string? | Gets or sets the component width and height. |