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>
Importing
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
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 WaSpinner from '@awesome.me/webawesome/dist/react/spinner';
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
styles |
||
customStates |
Methods for setting and checking custom states.
Type
objectDefault
{ /** Adds or removes the specified custom state. / set: (customState: string, active: boolean) => { if (!Boolean(this.internals?.states)) return; try { if (active) { this.internals.states.add(customState); } else { this.internals.states.delete(customState); } } catch (e) { if (String(e).includes("must start with '--'")) { / eslint-disable-next-line / console.error('Your browser implements an outdated version of CustomStateSet. Consider using a polyfill'); } else { throw e; } } }, /* Determines whether or not the element currently has the specified state. */ has: (customState: string) => { if (!Boolean(this.internals?.states)) return false; try { return this.internals.states.has(customState); } catch { return false; } }, } |
Methods
Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
relayNativeEvent() |
Given a native event, this function cancels it and dispatches it again from the host element using the desired event options. |
event: Event,
eventOptions: EventInit
|
CSS custom properties
Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--indicator-color |
The color of the spinner's indicator.
|
--speed |
The time it takes for the spinner to complete one animation cycle.
|
--track-color |
The color of the track.
|
--track-width |
The width of the track.
|
CSS parts
Jump to heading
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|