Spinner
<wa-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>
CSS custom properties Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--track-width |
The width of the track.
|
--track-color |
The color of the track.
|
--indicator-color |
The color of the spinner's indicator.
|
--speed |
The time it takes for the spinner to complete one animation cycle.
|
CSS parts Jump to heading
Learn more about CSS parts.
| Name | Description |
|---|---|
base |
The component's base wrapper. |
Importing Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/components/spinner/spinner.js';
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/spinner/spinner.js';
To manually import this component from React, use the following code.
import '@awesome.me/webawesome/dist/react/spinner';