Progress Bar

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

Components

DaffProgressBarComponent

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

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

@Component()
class DaffProgressBarComponent {
  @Input() color: DaffPalette
  @Input() percentage: number
  @Input() ariaLabel: string = ''
  @Input() indeterminate: boolean = false

  @Output() finished: EventEmitter<void> = new EventEmitter()
}

Inputs

color

DaffPalette

Default –

Description

Sets the color on a component.

Default options are: primary, secondary, tertiary, light, dark, theme, and theme-contrast.

percentage

number

Default	–
Description	Sets the percentage completion of the progression, expressed as a whole number between 0 and 100.

ariaLabel

string

Default	`''`
Description	An `aria-label` for the progress bar.

indeterminate

boolean

Default false

Description

Default	`false`
Description	Property to set the animation of a progress bar to run for an indefinite amount of time. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

Property to set the animation of a progress bar to run for an indefinite amount of time.

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

Outputs

finished

EventEmitter

Default	–
Description	An event that emits each time the progression reaches 100% and the animation is finished.

Directives

DaffProgressBarLabelDirective

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

Use label to help users understand what the progress represents.

@Directive()
class DaffProgressBarLabelDirective {}

Modules

DaffProgressBarModule

Deprecated

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

@NgModule()
class DaffProgressBarModule {}