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
.