<wa-spinner>
Spinners are used to show the progress of an indeterminate operation.
<wa-spinner></wa-spinner>
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>
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>
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>
| 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.
|
| Name | Description |
|---|---|
base |
The component's base wrapper. |
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-alpha.4/dist/components/spinner/spinner.js';