React

LoaderCircular

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

Examples

Sizes

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.

Playground