Progress bar

The progress bar component is used to visualize progress.

The <dt-progress-bar> creates a simple progress bar. It is possible to set the value for the progress bars as well as setting a min and max value. The color property can be set to specify the color of the progress. The color depends on the theme the progress bars is in. The value will be clamped between the min and max values.

´ Loading interactive demo...
<dt-progress-bar [value]="75"></dt-progress-bar> export class ProgressBarDefaultExample {} <dt-progress-bar [value]="75"></dt-progress-bar> export class ProgressBarDefaultExample {}

Imports

You have to import the DtProgressBarModule when you want to use the dt-progress-bar.

@NgModule({
  imports: [DtProgressBarModule],
})
class MyModule {}

Inputs

Name Type Default Description
value number 0 Gets and sets the value on the progress-bar.
min number 0 Gets and sets the minimum value on the progress bar
max number 100 Gets and sets the maximum value on the progress bar
align 'start' | 'end' start Sets the alignment of the progress element to the star or to the end.

Using the align input the alignment of the progress bar can be changed to end.

´ Loading interactive demo...
<dt-progress-bar [value]="30" [align]="'end'"></dt-progress-bar> export class ProgressBarRightAlignedExample {} <dt-progress-bar [value]="30" [align]="'end'"></dt-progress-bar> export class ProgressBarRightAlignedExample {}

Outputs

Name Type Description
valueChange EventEmitter<{ oldValue: number, newValue: number }> Event emitted when the progress bar value changes.
´ Loading interactive demo...
<p>Value passed to the progress bar: {{ value }}</p> <dt-progress-bar (valueChange)="changed($event)" [value]="value" ></dt-progress-bar> <div> <button dt-button (click)="value = value - 10">decrease by 10</button> <button dt-button (click)="value = value + 10">increase by 10</button> </div> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class ProgressBarChangeExample { oldValue: number | null = null; newValue: number | null = null; value = 0; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } } <p>Value passed to the progress bar: {{ value }}</p> <dt-progress-bar (valueChange)="changed($event)" [value]="value" ></dt-progress-bar> <div> <button dt-button (click)="value = value - 10">decrease by 10</button> <button dt-button (click)="value = value + 10">increase by 10</button> </div> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class ProgressBarChangeExample { oldValue: number | null = null; newValue: number | null = null; value = 0; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } }

Properties

Name Type Description
percentage number Gets the percentage used to render the progress

Progress bar description

The <dt-progress-bar-description> component lets you add a description to the progress-bar. It utilises ng-content selection within the <dt-progress-bar> component to position the description correctly. Use the description to provide more insight into what the progress bar actually indicates.

<dt-progress-bar ...>
  <dt-progress-bar-description>
    Rich text describing the progress...
  </dt-progress-bar-description>
  <dt-progress-bar></dt-progress-bar>
</dt-progress-bar>
´ Loading interactive demo...
<dt-progress-bar [value]="75"> <dt-progress-bar-description> We found more than 100 results. This may take a while, consider narrowing your search. </dt-progress-bar-description> </dt-progress-bar> export class ProgressBarWithDescriptionExample {} <dt-progress-bar [value]="75"> <dt-progress-bar-description> We found more than 100 results. This may take a while, consider narrowing your search. </dt-progress-bar-description> </dt-progress-bar> export class ProgressBarWithDescriptionExample {}

Progress bar count

The <dt-progress-bar-count> component lets you add a count to the progressbar which usually is a textual representation of the progress displayed (i.e. 80/100 days). It utilises ng-content selection within the <dt-progress-bar> component to position the count data correctly. Any values passed to the progress-bar-count are not affected by the progress-bar component min/max values. Use the count to display a text representation of the progress.

<dt-progress-bar ...>
  <dt-progress-bar-count>80/100 days</dt-progress-bar-count>
  <dt-progress-bar></dt-progress-bar>
</dt-progress-bar>
´ Loading interactive demo...
<dt-progress-bar (valueChange)="changed($event)" [value]="value"> <dt-progress-bar-count> <strong>{{ value }}/{{ max }} days</strong> </dt-progress-bar-count> </dt-progress-bar> <div> <button dt-button (click)="value = value - 10">decrease by 10</button> <button dt-button (click)="value = value + 10">increase by 10</button> </div> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class ProgressBarWithCountExample { oldValue: number | null = null; newValue: number | null = null; value = 0; max = 100; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } } <dt-progress-bar (valueChange)="changed($event)" [value]="value"> <dt-progress-bar-count> <strong>{{ value }}/{{ max }} days</strong> </dt-progress-bar-count> </dt-progress-bar> <div> <button dt-button (click)="value = value - 10">decrease by 10</button> <button dt-button (click)="value = value + 10">increase by 10</button> </div> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class ProgressBarWithCountExample { oldValue: number | null = null; newValue: number | null = null; value = 0; max = 100; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } }
´ Loading interactive demo...
<dt-progress-bar (valueChange)="changed($event)" [value]="value"> <dt-progress-bar-description> We found more than 100 results. This may take a while, consider narrowing your search. </dt-progress-bar-description> <dt-progress-bar-count> <strong>{{ value }}/{{ max }} days</strong> </dt-progress-bar-count> </dt-progress-bar> <div> <button dt-button (click)="value = value - 10">decrease by 10</button> <button dt-button (click)="value = value + 10">increase by 10</button> </div> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class ProgressBarWithCountAndDescriptionExample { oldValue: number | null = null; newValue: number | null = null; value = 0; max = 100; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } } <dt-progress-bar (valueChange)="changed($event)" [value]="value"> <dt-progress-bar-description> We found more than 100 results. This may take a while, consider narrowing your search. </dt-progress-bar-description> <dt-progress-bar-count> <strong>{{ value }}/{{ max }} days</strong> </dt-progress-bar-count> </dt-progress-bar> <div> <button dt-button (click)="value = value - 10">decrease by 10</button> <button dt-button (click)="value = value + 10">increase by 10</button> </div> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class ProgressBarWithCountAndDescriptionExample { oldValue: number | null = null; newValue: number | null = null; value = 0; max = 100; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } }

Colors

The progress bar can be colored based on its color theme palette.

´ Loading interactive demo...
<dt-progress-bar [value]="45" [color]="color"></dt-progress-bar> <div> <dt-button-group [value]="color" (valueChange)="changed($event)"> <dt-button-group-item value="main">main</dt-button-group-item> <dt-button-group-item value="accent">accent</dt-button-group-item> <dt-button-group-item value="warning">warning</dt-button-group-item> <dt-button-group-item value="error">error</dt-button-group-item> <dt-button-group-item value="recovered">recovered</dt-button-group-item> </dt-button-group> </div> export class ProgressBarWithColorExample { color = 'error'; changed(val: string): void { this.color = val; } } <dt-progress-bar [value]="45" [color]="color"></dt-progress-bar> <div> <dt-button-group [value]="color" (valueChange)="changed($event)"> <dt-button-group-item value="main">main</dt-button-group-item> <dt-button-group-item value="accent">accent</dt-button-group-item> <dt-button-group-item value="warning">warning</dt-button-group-item> <dt-button-group-item value="error">error</dt-button-group-item> <dt-button-group-item value="recovered">recovered</dt-button-group-item> </dt-button-group> </div> export class ProgressBarWithColorExample { color = 'error'; changed(val: string): void { this.color = val; } }

Dark background

Progress bars can be placed on dark background.

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-progress-bar [value]="value"> <dt-progress-bar-description> We found more than 100 results. This may take a while, consider narrowing your search. </dt-progress-bar-description> <dt-progress-bar-count>{{ value }}% loaded</dt-progress-bar-count> </dt-progress-bar> </div> export class ProgressBarDarkExample { value = 67; } <div class="dark" dtTheme=":dark"> <dt-progress-bar [value]="value"> <dt-progress-bar-description> We found more than 100 results. This may take a while, consider narrowing your search. </dt-progress-bar-description> <dt-progress-bar-count>{{ value }}% loaded</dt-progress-bar-count> </dt-progress-bar> </div> export class ProgressBarDarkExample { value = 67; }

Accessibility

Progress bars should be given a meaningful label via aria-label or aria-labelledby.

Progress bar in use

While the loading distractor does not indicate how long something will take, the progress bar displays how far along the process is.

The progress bar should be used to display a distinct progress of a process or status, i.e. a download progress or used status of a disk.

Animation

Once the bar has finished loading, it will fade out after 1s and the loaded content will move up to fill the space where the progress bar used to be. The fade out transition takes 500ms.

Progress bar animation

Progress bar with indicator

When the progress value reaches a defined threshold an indicator can be used to highlight the number as shown in the following example.

´ Loading interactive demo...
<dt-progress-bar (valueChange)="changed($event)" [value]="value"> <dt-progress-bar-description> We found more than 100 results. This may take a while, consider narrowing your search. </dt-progress-bar-description> <dt-progress-bar-count> <strong> <span [dtIndicator]="metricHasProblem(value)" dtIndicatorColor="error" > {{ value }} </span> /{{ max }} days </strong> </dt-progress-bar-count> </dt-progress-bar> <div> <button dt-button (click)="value = value - 10">decrease by 10</button> <button dt-button (click)="value = value + 10">increase by 10</button> </div> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class ProgressBarWithCountAndDescriptionIndicatorExample { oldValue: number | null = null; newValue: number | null = null; value = 70; max = 100; limit = 75; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } metricHasProblem(value: number): boolean { return value > this.limit; } } <dt-progress-bar (valueChange)="changed($event)" [value]="value"> <dt-progress-bar-description> We found more than 100 results. This may take a while, consider narrowing your search. </dt-progress-bar-description> <dt-progress-bar-count> <strong> <span [dtIndicator]="metricHasProblem(value)" dtIndicatorColor="error" > {{ value }} </span> /{{ max }} days </strong> </dt-progress-bar-count> </dt-progress-bar> <div> <button dt-button (click)="value = value - 10">decrease by 10</button> <button dt-button (click)="value = value + 10">increase by 10</button> </div> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class ProgressBarWithCountAndDescriptionIndicatorExample { oldValue: number | null = null; newValue: number | null = null; value = 70; max = 100; limit = 75; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } metricHasProblem(value: number): boolean { return value > this.limit; } }