LoaderLinear
SfLoaderLinear
is animated loading spinner that can be used to show that some content is loading.
Examples
Sizes
SfLoaderLinear
does not set it's own width by default, however you can control its height with the size
prop. Possible values are minimal
, 'xs'
, 'sm'
, 'base'
, 'lg'
, 'xl'
, '2xl'
, '3xl'
, '4xl'
.
Customizing colors
By default, SfLoaderLinear
uses primary-700
as the color of the bar (customizable by setting text color) and neutral-300
as its background. 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.
Accessibility notes
SfLoaderLinear
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
.