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>exportclass 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.
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><buttondt-button (click)="value = value - 10">decrease by 10</button><buttondt-button (click)="value = value + 10">increase by 10</button></div><p *ngIf="oldValue !== null">
Event: OldValue: {{ oldValue }}
<br />
NewValue: {{ newValue }}
</p>exportclass 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>exportclass 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 (valueChange)="changed($event)" [value]="value"><dt-progress-bar-count><strong>{{ value }}/{{ max }} days</strong></dt-progress-bar-count></dt-progress-bar><div><buttondt-button (click)="value = value - 10">decrease by 10</button><buttondt-button (click)="value = value + 10">increase by 10</button></div><p *ngIf="oldValue !== null">
Event: OldValue: {{ oldValue }}
<br />
NewValue: {{ newValue }}
</p>exportclass 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><buttondt-button (click)="value = value - 10">decrease by 10</button><buttondt-button (click)="value = value + 10">increase by 10</button></div><p *ngIf="oldValue !== null">
Event: OldValue: {{ oldValue }}
<br />
NewValue: {{ newValue }}
</p>exportclass 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.
<divclass="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>exportclass 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 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><buttondt-button (click)="value = value - 10">decrease by 10</button><buttondt-button (click)="value = value + 10">increase by 10</button></div><p *ngIf="oldValue !== null">
Event: OldValue: {{ oldValue }}
<br />
NewValue: {{ newValue }}
</p>exportclass 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;
}
}
