2020-07-15 21:30:37 +00:00
# Spinner
[component-header:sl-spinner]
Spinners are used to show the progress of an indeterminate operation.
```html preview
< sl-spinner > < / sl-spinner >
```
## Examples
### Size
2021-09-17 21:48:44 +00:00
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.
2020-07-15 21:30:37 +00:00
```html preview
< sl-spinner > < / sl-spinner >
< sl-spinner style = "font-size: 2rem;" > < / sl-spinner >
< sl-spinner style = "font-size: 3rem;" > < / sl-spinner >
```
2021-09-17 21:48:44 +00:00
### Track Width
2020-07-15 21:30:37 +00:00
2021-09-17 21:48:44 +00:00
The width of the spinner's track can be changed by setting the `--track-width` custom property.
2020-07-15 21:30:37 +00:00
```html preview
2021-09-17 21:48:44 +00:00
< sl-spinner style = "font-size: 3rem; --track-width: 6px;" > < / sl-spinner >
2020-07-15 21:30:37 +00:00
```
### Color
2020-12-22 14:40:11 +00:00
The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
2020-07-15 21:30:37 +00:00
```html preview
2021-09-17 21:48:44 +00:00
< sl-spinner style = "font-size: 3rem; --indicator-color: deeppink; --track-color: pink;" > < / sl-spinner >
2020-07-15 21:30:37 +00:00
```
[component-metadata:sl-spinner]
