Spinner
<sl-spinner> | SlSpinner
Spinners are used to show the progress of an indeterminate operation.
<sl-spinner></sl-spinner>
Examples
Size
Spinners are sized based on the current font size. To change their size, set the
font-size property on the spinner itself or on a parent element as shown below.
<sl-spinner></sl-spinner> <sl-spinner style="font-size: 2rem;"></sl-spinner> <sl-spinner style="font-size: 3rem;"></sl-spinner>
Track Width
The width of the spinner’s track can be changed by setting the --track-width custom property.
<sl-spinner style="font-size: 50px; --track-width: 10px;"></sl-spinner>
Color
The spinner’s colors can be changed by setting the --indicator-color and
--track-color custom properties.
<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
Custom Properties
| Name | Description | Default |
|---|---|---|
--track-width |
The width of the track. | |
--track-color |
The color of the track. | |
--indicator-color |
The color of the spinner’s indicator. | |
--speed |
The time it takes for the spinner to complete one animation cycle. |
Learn more about customizing CSS custom properties.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
Learn more about customizing CSS parts.