Loading Icon

Overview

Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the Progress Bar component instead.

Usage

Within a standalone component

To use loading icon in a standalone component, import DAFF_LOADING_ICON_COMPONENTS directly into your custom component:

import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';

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

Within a module (deprecated)

To use loading icon in a module, import DaffLoadingIconModule into your custom module:

import { NgModule } from '@angular/core';
import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { CustomComponent } from './custom.component';

@NgModule({
    declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffLoadingIconModule,
  ],
})
export class CustomComponentModule { }

This method is deprecated. It's recommended to update all custom components to standalone.

Colors

Use the color property to change the color of a loading icon. The default color is gray.

theme and white should be used on a darker background in order to have sufficient contrast.

Accessibility

Loading icons should be given meaningful labels by using aria-label or aria-labelledby.

If a loading icon is used to indicate a process in progress, using aria-live and aria-busy should be strongly considered.