Spinner
Loading indicators for async states, background fetches, and actions that need a clear pending signal.
Component preview
Explore the available states and the real library behavior for this component.
zyra-spinner Playground
Loading spinner with size, color and accessibility label support
<zyra-spinner />
size - xs / sm / md / lg
color - accent / accent-2 / white / current
label - screen reader text
<zyra-spinner size="md" color="accent" label="Loading..." />
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraSpinner } from 'zyra-ng-ui';
@Component({
selector: 'app-demo-spinner',
standalone: true,
imports: [ZyraSpinner],
template: `
<zyra-spinner
size="md"
color="accent"
label="Loading dashboard"
/>
`,
})
export class DemoSpinnerComponent {}
Variants
All the visual modes and states available for this component.
accentTeal accent color (default brand color)
mutedLow-contrast grey for subtle loading states
whiteWhite variant for use on dark or colored backgrounds
API
All inputs and configuration options for zyra-spinner.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Diameter of the spinner |
color | 'accent' | 'muted' | 'white' | 'accent' | Spinner track color |
label | string | Loading… | Screen-reader-only label for accessibility |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="status" so screen readers announce the loading state
- label is visually hidden but announced to screen readers
- When embedding in a button, set button aria-busy="true" alongside the spinner