previously Vue Storefront Build Better Storefronts


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



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.