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/design/spinner'

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

@Component()
class DaffSpinnerComponent {
  ariaLabel: InputSignal<string> = 'loading', { alias: 'aria-label' }
  @Input() color: DaffColor
  @Input() size: DaffButtonSize
}

Inputs

ariaLabel
InputSignal<string>
Default'loading', { alias: 'aria-label' }
Description

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

color
DaffColor
Default
Description

The color of the component.

size
DaffButtonSize
Default
Description

The size of the component.


Directives

DaffSpinnerLabelDirective

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

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

@Directive()
class DaffSpinnerLabelDirective {}