RadialProgress: Blazor radial progress component

Examples

Value runs from 0 to 100; Color tints the ring and its label.

25%

50%

75%

100%

website/Examples/Feedback/RadialProgressValuesExample.razor Source

SizeRem and Thickness take any CSS length.

70%

website/Examples/Feedback/RadialProgressSizeExample.razor Source

ChildContent replaces the percentage, here with elapsed time on a 3:34 build.

1:36

website/Examples/Feedback/RadialProgressContentExample.razor Source

72%

Value

Color Color

SizeRem

Thickness

<RadialProgress
                Value="72"
                Color="Color.Primary"
                SizeRem="8rem"
                Thickness="10px" />

DaisyBlazor

AriaLabel string
= null
Accessible name of the progressbar (aria-label), e.g. "Storage used".
Color Color
= Color.Default
Color token for the ring and label text (maps to text-primary, text-success, etc.).
SizeRem string
= "5rem"
CSS size of the radial element (e.g. "5rem", "80px"). Maps to the CSS --size custom property. Defaults to "5rem".
Thickness string
= null
CSS thickness of the progress ring (e.g. "4px", "0.5rem"). Maps to the CSS --thickness custom property. When null the daisyUI default thickness is used.
Value double
= 0
Progress value between 0 and 100 (clamped). Maps to the CSS --value custom property.
Class string
= null
Extra CSS classes merged onto the .radial-progress element.
Style string
= null
Inline CSS appended after the --value/--size/--thickness custom properties.

Name	Type	Default	Description
AriaLabel	string	null	Accessible name of the progressbar (aria-label), e.g. "Storage used".
Color	Color	Color.Default	Color token for the ring and label text (maps to text-primary, text-success, etc.).
SizeRem	string	"5rem"	CSS size of the radial element (e.g. "5rem", "80px"). Maps to the CSS --size custom property. Defaults to "5rem".
Thickness	string	null	CSS thickness of the progress ring (e.g. "4px", "0.5rem"). Maps to the CSS --thickness custom property. When null the daisyUI default thickness is used.
Value	double	0	Progress value between 0 and 100 (clamped). Maps to the CSS --value custom property.
Class	string	null	Extra CSS classes merged onto the .radial-progress element.
Style	string	null	Inline CSS appended after the --value/--size/--thickness custom properties.

ChildContent RenderFragment
Custom inner content; defaults to the rounded "@Value%" when not provided.

Name	Type	Description
ChildContent	RenderFragment	Custom inner content; defaults to the rounded "@Value%" when not provided.