Go to github repo github logo

Spinner

Edit this page on GitHub
<cc-spinner></cc-spinner>

Size

Spinners are sized as 1em by default. To change their size, add an inline style to increase the font size as shown below.

<cc-spinner style="font-size: 2rem;"></cc-spinner>
<!-- or -->
<cc-spinner style="--size: 2em;"></cc-spinner>

Speed

Speed defualts to 1s, you can change that using --speed custom property.

<cc-spinner style="--speed: 0.5s;"></cc-spinner>

Track Width

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

<cc-spinner style="font-size: 2rem; --track-width: 4px;"></cc-spinner>

Color

Color can be changed by setting --track-color and --indicator-color custom properties.

<cc-spinner 
  style="font-size: 2rem; --track-color: pink; --indicator-color: deeppink;">
</cc-spinner>