<dt-progress-bar [value]="75"></dt-progress-bar>exportclass DefaultProgressBarExampleComponent { }
export class DefaultProgressBarExampleComponent { }
While the loading distractor does not indicate how long something will take, the progress bar displays how far along the process is.
Styleguide
The progress bar consists of a description, the progress count (e.g. 10/90 days, 70% loaded) and a bar, visualizing the progress.
Description
font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700text-align: left
Count
font-family: Bernina Sans Semibold
font-weight: 600font-size: 14pxcolor: $gray-900text-align: right
Placeholder bar
width:100%
height:4px
color: theme color shade 200
margin-top:8px
Progress bar
color: main theme color
width:100%
height:4px
margin-top:8px
Variants
Progress bar on dark background
On dark background, the description and progress count colors change to #fff.
Behavior
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.
Responsive behavior
The progress bar is always full width. On narrow screens, the description will be above the progress count.
Loading interactive demo...
<dt-progress-bar [value]="75"></dt-progress-bar>exportclass DefaultProgressBarExampleComponent { }
export class DefaultProgressBarExampleComponent { }
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.
Imports
You have to import the DtProgressBarModule when you want to use the dt-progress-bar:
@NgModule({
imports: [
DtProgressBarModule,
],
})
class MyModule {}
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.
<dt-progress-bar...><dt-progress-bar-description>Rich text describing the progress...</dt-progress-bar-description><dt-progress-bar>
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-contnet 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.
<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 WithDescriptionProgressBarExampleComponent { }
We found more than 100 results. This may take a while, consider narrowing your search.
export class WithDescriptionProgressBarExampleComponent { }
Progress bar with counter
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><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 WithCountDescriptionProgressBarComponent {
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;
}
}
{{value}}/{{max}} days
export class WithCountDescriptionProgressBarComponent {
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;
}
}
Progress bar with description and counter
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 WithCountAndTextDescriptionProgressBarComponent {
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;
}
}
We found more than 100 results. This may take a while, consider narrowing your search.
{{value}}/{{max}} days
export class WithCountAndTextDescriptionProgressBarComponent {
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;
}
}
Progress bar with description and counter - Uses dt-indicator above 75/100 days
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 WithCountAndTextDescriptionIndicatorProgressBarComponent {
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;
}
}
We found more than 100 results. This may take a while, consider narrowing your search.
{{value}}/{{max}} days