SfProgressCircular can be used provide feedback about the duration and progression of a process.
SfProgressCircular supports various sizes that can be set with the
primary-700 as the shape color (customizable by setting text color) and
neutral-300 for the background ring. You can change these values in your Tailwind configuration (opens new window) or override them for a single-element using
important modifier (opens new window).
Learn more about overriding default styles in Storefront UI.
With floating label
You can add text to the center of the Progress Circle by providing content to the component via the
SfProgressCircular is built using an
svg, so your content must be SVG-compatible.
This component sets the
role="progressbar" to allow screen readers treat it as an indicator of progress status (opens new window).