previously Vue Storefront Build Better Storefronts


SfProgressCircular can be used provide feedback about the duration and progression of a process.



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. You can change these values in your Tailwind configuration or override them for a single-element using important modifier.

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 default slot.

SfProgressCircular is built using an svg, so your content must be SVG-compatible.

Accessibility notes

This component sets the role="progressbar" to allow screen readers treat it as an indicator of progress status.