ProgressLinear
SfProgressLinear provides feedback about the duration and progression of a process.
Examples
Sizes
SfProgressLinear does not set it's own width by default, however you can control its height with the size prop. Possible values are 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl'.
Customizing colors
By default, SfProgressLinear 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.
With label
SfProgressLinear should be displayed with an accessible text label. You achieve this for example: by using ariaLabel prop or by nesting the component inside a <label> with text content.
Accessibility notes
ProgressLinear uses native <progress> HTMLElement] to [allow screen readers treat it as an indicator of progress status.