CSS: spinner
.instui-spinner — An animated loading ring; give it role="status" and an aria-label.
Source: spinner.css
Accessibility
Give the spinner role="status" and an aria-label so screen readers announce it as a live loading status.
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/spinner.css";Demo
Examples
html
<span class="instui-spinner -size-xs" role="status" aria-label="Loading"></span>Modifiers
| Modifier | Description |
|---|---|
.-color-inverse | On a dark surface. |
.-size-large | Large. Long-form alias of -size-lg. |
.-size-lg | Large. |
.-size-sm | Small. |
.-size-small | Small. Long-form alias of -size-sm. |
.-size-x-small | Extra-small. Long-form alias of -size-xs. |
.-size-xs | Extra-small. |
Animations
| Animation | Description |
|---|---|
pantoken-spinner-rotate | — |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-component-spinner-color | <color> | light-dark(#2871AF, #7FB4F1)LightDark |
--instui-component-spinner-inverse-color | <color> | #ffffff |
--instui-component-spinner-spinner-size-lg | <length> | 4.5rem |
--instui-component-spinner-spinner-size-md | <length> | 3.5rem |
--instui-component-spinner-spinner-size-sm | <length> | 2rem |
--instui-component-spinner-spinner-size-xs | <length> | 1rem |
--instui-component-spinner-stroke-width-lg | <length> | 0.75em |
--instui-component-spinner-stroke-width-md | <length> | 0.5em |
--instui-component-spinner-stroke-width-sm | <length> | 0.375em |
--instui-component-spinner-stroke-width-xs | <length> | 0.25em |
--instui-component-spinner-track-color | <color> | light-dark(rgba(35,68,101,0.1), rgba(255,255,255,0.1))LightDark |