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>

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.

Sizes

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

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>