Star
Back to components

Spinner

zyra-spinner
FeedbackZyraSpinner

Component preview

Explore the available states and the real library behavior for this component.

Live previewZyraSpinner

zyra-spinner Playground

4 sizes4 colors

Loading spinner with size, color and accessibility label support

Controls
size
color
label (aria)
Usage

<zyra-spinner />

size - xs / sm / md / lg

color - accent / accent-2 / white / current

label - screen reader text

Live Preview mdaccent
Generated Code
<zyra-spinner size="md" color="accent"
  label="Loading..."
/>
Sizes xs to lg
xs
sm
md
lg
Colors 4 variants
accentprimary teal
accent-2secondary blue
currentinherits currentColor
Real World - Button Loading States click to simulate
Save changes
Upload file
Delete (shows error)
Real World - Inline Usage
Loading data table
Fetching records...
Async validator in input
Checking username
Full page overlay
Usage code
zyra-spinner
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 {}
Useful for async statesEasy to drop into buttonsKeeps loading feedback visible