Spinner
Visualize progress with loading indicators
Source ↗️ Report Issue ↗️Use the Spinner
component to inform users about ongoing processes, such as loading content or processing data. They are crucial for managing user expectations and enhancing the user experience during wait times.
To configure the appearance and behavior of your spinners, you can override the following CSS variables:
If you need to globally apply custom styles to your spinners, prefer the above solution. However, you can also configure each individual Spinner
component trough the following props if you need different variants in the same application.
Sizes
Spinner sizes can be configured with the size
and width
props:
Styles
The appearance of your spinners can be configured via the color
prop:
Speed
To configure the speed of the spinner, assign a custom value to the speed
prop in seconds:
Variants
The apperance of the Spinner
component can also be changed using the --w-spinner-dash
CSS variables, or setting the dashArray
prop, which changes the stroke-dasharray
attribute of the SVG element:
API
Prop | Purpose |
---|---|
color | Sets the color of the spinner. |
width | Sets the width of the stroke of the spinner. |
speed | Sets the speed of the spinner. |
size | Sets the size of the spinner. |
dashArray | Sets the stroke-dasharray attribute of the SVG element. |
Request improvement for this page