910 B

Czysty Wina Historia

Spinner

[component-header:sl-spinner]

Spinners are used to show the progress of an indeterminate operation.

<sl-spinner></sl-spinner>

Examples

Size

Spinners are sized relative to 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>

Stroke Width

The width of the spinner can be changed by setting the --stroke-width custom property.

<sl-spinner style="font-size: 2rem; --stroke-width: 6px;"></sl-spinner>

Color

The spinner's color can be changed by setting the --color custom property.

<sl-spinner style="font-size: 2rem; --color: tomato;"></sl-spinner>

[component-metadata:sl-spinner]

910 B Czysty Wina Historia