Progress Bar

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

DaffProgressBarModule

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

@NgModule()
class DaffProgressBarModule {}

DAFF_PROGRESS_BAR_COMPONENTS

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

const DAFF_PROGRESS_BAR_COMPONENTS: readonly [typeof DaffProgressBarComponent, typeof DaffProgressBarLabelDirective]

clamp

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

const clamp: (number: number, min: number, max: number) => number

DaffProgressBarComponent

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

@Component()
class DaffProgressBarComponent {
  @HostBinding() 
  get role()
  @HostBinding() 
  get ariaLabel()
  @HostBinding() ariaValueMin: '0'
  @HostBinding() ariaValueMax: '100'
  @HostBinding() 
  get ariaValueNow()
  @Input() 
  get percentage(): number
  set percentage(value): number
  @Input() 
  get indeterminate(): any
  set indeterminate(value): any
  @Output() finished: EventEmitter<void>
  onAnimationComplete(event: AnimationEvent_2): void
}

Selector: 'daff-progress-bar'

Properties

Name	Type	Description
role
ariaLabel
ariaValueMin	'0'
ariaValueMax	'100'
ariaValueNow
@Input() percentage	number	Sets the percentage completion of the progression, expressed as a whole number between 0 and 100.
@Input() indeterminate	any	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
@Output() finished	EventEmitter<void>	An event that emits each time the progression reaches 100% and the animation is finished
onAnimationComplete	void	Calculates when the progress animation is fully completed

DaffProgressBarLabelDirective

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

@Directive()
class DaffProgressBarLabelDirective {
  @HostBinding() class: true
}

Selector: '[daffProgressBarLabel]'

Properties

Name	Type	Description
class	true