Spinner

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

<wa-spinner></wa-spinner>

Examples Jump to heading

Size Jump to heading

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.

<wa-spinner></wa-spinner>
<wa-spinner style="font-size: 2rem;"></wa-spinner>
<wa-spinner style="font-size: 3rem;"></wa-spinner>

Track Width Jump to heading

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

<wa-spinner style="font-size: 50px; --track-width: 10px;"></wa-spinner>

Color Jump to heading

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

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

Importing Jump to heading

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

import 'https://ka-f.webawesome.com/webawesome@0.14.0/components/spinner/spinner.js';

import '@awesome.me/webawesome/dist/components/spinner/spinner.js';

import './webawesome/dist/components/spinner/spinner.js';

import WaSpinner from '@awesome.me/webawesome/dist/react/spinner/index.js';

Attributes & Properties Jump to heading

Learn more about attributes and properties.

CSS custom properties Jump to heading

Learn more about CSS custom properties.

CSS parts Jump to heading

Learn more about CSS parts.