Progress Bar

A progress bar provides visual feedback about the duration or progress of a task or operation.

Usage

Within a standalone component

To use progress bar in a standalone component, import DAFF_PROGRESS_BAR_COMPONENTS directly into your custom component:

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

Within a module (deprecated)

To use progress bar in a module, import DaffProgressBarModule into your custom module:

import { NgModule } from '@angular/core';

import { DaffProgressBarModule } from '@daffodil/design/progress-bar';

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

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

Types

There are two types of progress bars: determinate and indeterminate. They are determinate by default.

Determinate

Determinate progress bars should be used when the percentage of a task or operation is known.

Indeterminate

Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.

Theming

The progress bar color is defined by using the color property. By default, the color is set to primary. This can be changed to one of the supported colors.

theme, theme-contrast, white, and black should be used with caution to ensure that there is sufficient contrast.

Accessibility

The progress bar component works with the ARIA role="progressbar" to provide an accessible experience. A Label should always be provided by using label[daffFormLabel], aria-label, or aria-labelledby.