Spinner
Indeterminate loading indicator used by every Pending state.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="row" style="align-items:center">
<span class="px-spinner px-spinner--sm" role="status" aria-label="Loading"></span>
<span class="px-spinner" role="status" aria-label="Loading"></span>
<span class="px-spinner px-spinner--lg" role="status" aria-label="Loading"></span>
<span class="px-spinner px-spinner--neutral" role="status" aria-label="Loading"></span>
<span class="px-spinner px-spinner--danger" role="status" aria-label="Loading"></span>
<span style="background:var(--px-color-background-brand-default);padding:8px;border-radius:8px;display:inline-flex"><span class="px-spinner px-spinner--on-color" role="status" aria-label="Loading"></span></span>
</div>Usage
- Brand on light surfaces, On color on filled buttons.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-spinner--sm · --lg | class | Size. |
px-spinner--neutral · --on-color · --danger | class | Tone. |
Figma properties
Spinner12 variants · page “Progress Bar”Open
Indeterminate loading indicator used by every Pending state. Tone follows the surface: Brand on light surfaces, On color on filled buttons.
| Property | Type | Values |
|---|---|---|
| Size | Variant | Small Medium Large |
| Tone | Variant | Brand Neutral On color Danger |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-spinner-brand-track | color-border-brand-subtle | #bfdbfe |
--px-spinner-brand-indicator | color-border-brand-default | #2563eb |
--px-spinner-neutral-track | color-border-neutral-subtle | #f2f4f7 |
--px-spinner-neutral-indicator | color-content-neutral-secondary | #475467 |
--px-spinner-on-color-track | color-border-on-color-subtle | #ffffff4d |
--px-spinner-on-color-indicator | color-content-on-color | #ffffff |
--px-spinner-danger-track | color-border-danger-subtle | #fecdca |
--px-spinner-danger-indicator | color-border-danger-default | #f04438 |
Accessibility
- role="status" with an aria-label.