ProgressCircular
SfProgressCircular
can be used provide feedback about the duration and progression of a process.
Examples
Sizes
SfProgressCircular
supports various sizes that can be set with the size
prop: 'xs'
, 'sm'
, 'base'
, 'lg'
, 'xl'
, '2xl'
, '3xl'
, '4xl'
.
Customizing colors
By default, SfProgressCircular
uses primary-700
as the shape color (customizable by setting text color) and neutral-300
for the background ring.
With floating label
You can add text to the center of the Progress Circle by providing content to the component via the Slot
.
SfProgressCircular
is built using an svg
, so your content must be SVG-compatible.