Spinner

Overview

Use a spinner to indicate a short, indeterminate loading state. It can appear on its own or paired with a loading message. For longer processes with measurable progress, use the progress bar component.

Usage

To use spinner, import DAFF_SPINNER_COMPONENTS directly into your custom component:

import { DAFF_SPINNER_COMPONENTS } from '@daffodil/design/spinner';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_SPINNER_COMPONENTS,
  ],
})
export class CustomComponent {}

Anatomy

Label

Labels are used to describe the loading state and provide context for users. They are optional.

<daff-spinner>
  <daff-spinner-label>Loading products...</daff-spinner-label>
</daff-spinner>

<daff-spinner>
  <daff-spinner-label>Test</daff-spinner-label>
</daff-spinner>

Features

Colors

Use the color property to change the color of a spinner.

Note: dark, light, and theme should be used on appropriate backgrounds for sufficient contrast.

<daff-spinner [color]="colorControl.value"></daff-spinner>

<select [formControl]="colorControl">
  <option value="">Default</option>
  <option value="primary">Primary</option>
  <option value="secondary">Secondary</option>
  <option value="tertiary">Tertiary</option>
  <option value="theme">Theme</option>
  <option value="theme-contrast">Theme Contrast</option>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

Sizes

Use the size proeprty to change the size of a spinner. The default size is md.

<daff-spinner [size]="sizeControl.value"></daff-spinner>

<select [formControl]="sizeControl">
  <option value="">Default</option>
  <option value="xs">Extra small</option>
  <option value="sm">Small</option>
  <option value="md">Medium</option>
  <option value="lg">Large</option>
  <option value="xl">Extra large</option>
</select>

Accessibility

The spinner has role="status" which announces content changes to assistive technologies.

When using <daff-spinner-label>, the visible text serves as the accessible name. When no label is provided, the spinner defaults to aria-label="loading". You can customize this with the aria-label input:

<daff-spinner aria-label="Saving changes"></daff-spinner>