GitHub

Spinner

A spinner is an animated indicator that lets users know content or action is being loaded.

Components

DaffSpinnerComponent

import { DaffSpinnerComponent } from '@daffodil/design/spinner'

DaffSpinnerComponent is an animated indicator that lets users know content or action is being loaded.

@Component()
class DaffSpinnerComponent {
  ariaLabel: InputSignal<string> = input('loading', { alias: 'aria-label' })

  @Input() color: DaffPalette
  @Input() size: DaffButtonSize
}

Inputs

color
DaffPalette
Default
Description

Sets the color on a component.

size
DaffButtonSize
Default
Description

The size of the component.

Properties

ariaLabel
InputSignal
Defaultinput('loading', { alias: 'aria-label' })
Description

The aria-label for the spinner. Defaults to "loading".


Directives

DaffSpinnerLabelDirective

import { DaffSpinnerLabelDirective } from '@daffodil/design/spinner'

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

@Directive()
class DaffSpinnerLabelDirective {}