A progress bar provides visual feedback about the duration or progress of a task or operation.
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 {
percentage: InputSignalWithTransform<number, number> = 0, { transform: (val: number) => clamp(val, 0, 100) }
ariaLabel: InputSignal<string> = '', { alias: 'aria-label' }
indeterminate: InputSignalWithTransform<boolean, unknown> = false, { transform: booleanAttribute }
@Input() color: DaffColor
finished: OutputEmitterRef<void> = output<void>()
}
InputSignalWithTransform<number, number>| Default | 0, { transform: (val: number) => clamp(val, 0, 100) } |
|---|---|
| Description | Sets the percentage completion of the progression, expressed as a whole number between 0 and 100. |
InputSignal<string>| Default | '', { alias: 'aria-label' } |
|---|---|
| Description | An |
InputSignalWithTransform<boolean, unknown>| Default | false, { transform: booleanAttribute } |
|---|---|
| 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 |
DaffColor| Default | – |
|---|---|
| Description | The color of the component. |
OutputEmitterRef<void>| Default | – |
|---|---|
| Description | An event that emits each time the progression reaches 100% and the animation is finished. |
import { DaffProgressBarLabelDirective } from '@daffodil/design/progress-bar'
Use label to help users understand what the progress represents.
@Directive()
class DaffProgressBarLabelDirective {}
import { DaffProgressBarModule } from '@daffodil/design/progress-bar'
@NgModule()
class DaffProgressBarModule {}