SfLoaderCircular is animated loading spinner that can be used to show that some content is loading.



SfLoaderCircular supports various sizes that can be set with the size prop: 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl'.

Customizing colors

By default, SfLoaderCircular uses primary-700 as the animated 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 the important modifier (opens new window).

Learn more about overriding default styles in Storefront UI.

Accessibility notes

SfLoaderCircular uses aria-live="polite" to allow screen readers to read the loading status. This can be overriden by passing your own aria-live value to the component.

It's important to properly set aria-label for screen readers to read proper information while target component is loading. Default value is set to loading.