WebAwesome Laminar LogoWebAwesome Laminar

Spinner

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

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.

Spinner()()Spinner(  _.style := "font-size: 2rem;")()Spinner(  _.style := "font-size: 3rem;")()

Track Width

The width of the spinner's track can be changed by setting the --track-width custom property.

Spinner(  _.style := "font-size: 50px; --track-width: 10px;")()

Color

The spinner's colors can be changed by setting the --indicator-color and --track-color custom properties.

Spinner(  _.style := "font-size: 3rem; --indicator-color: deeppink; --track-color: pink;")()