Progress bar

Progress bar details

This component is themable.

Tagged with progress loading progress bar angular component

The progress bar is used to visualize progress.

´ Loading interactive demo...
<dt-progress-bar [value]="75"></dt-progress-bar> export class 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.

Progress bar stylguide

Description

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
text-align: left

Count

font-family: Bernina Sans Semibold
font-weight: 600
font-size: 14px
color: $gray-900
text-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.

Progress bar animation

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.

Progress bar mobile

´ Loading interactive demo...
<dt-progress-bar [value]="75"></dt-progress-bar> export class 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 ...>
  <dt-progress-bar-count>80/100 days</dt-progress-bar-count>
<dt-progress-bar>

Accessibility

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

Options & Properties

Name Type Default Description
@Input() value number 0 Gets and sets the value on the progress-bar.
@Input() min number 0 Gets and sets the minimum value on the progress bar
@Input() max number 100 Gets and sets the maximum value on the progress bar
@Input() align 'start' | 'end' start Sets the alignment of the progress element to the star or to the end.
@Ouput() valueChange EventEmitter<{ oldValue: number, newValue: number }> Event emitted when the progress bar value changes.
percentage number Gets the percentage used to render the progress

Examples

Progress bars with color

´ 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 WithColorProgressBarExampleComponent { color = 'error'; changed(val: string): void { this.color = val; } }
main accent warning error recovered
export class WithColorProgressBarExampleComponent { color = 'error'; changed(val: string): void { this.color = val; } }

Progress bars change

´ 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 ChangeProgressBarExampleComponent { 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; } }

Value passed to the progress bar: {{value}}

Event: OldValue: {{oldValue}}
NewValue: {{newValue}}

 export class ChangeProgressBarExampleComponent { 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; } }

Progress bar alignment

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

Progress bar with description

´ 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 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> <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 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

Event: OldValue: {{oldValue}}
NewValue: {{newValue}}

 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> <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 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

Event: OldValue: {{oldValue}}
NewValue: {{newValue}}

 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> <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 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

Event: OldValue: {{oldValue}}
NewValue: {{newValue}}

 export class 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; } }