Progress circle

The progress bar is used to visualize progress.

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

Unlike the loading distractor that doesn't indicate how long something will take, the progress bar displays how far along the process is. The progress bar ist themable.

Variants

Progess circles can be used with icons or text.

´ Loading interactive demo...
<dt-progress-circle [value]="30"> <dt-icon name="agent"></dt-icon> </dt-progress-circle> export class ProgressCircleWithIconExample {} <dt-progress-circle [value]="30"> <dt-icon name="agent"></dt-icon> </dt-progress-circle> export class ProgressCircleWithIconExample {}
´ Loading interactive demo...
<dt-progress-circle [value]="value" [max]="max"> {{ value }}/{{ max }} </dt-progress-circle> export class ProgressCircleWithTextExample { value = 300; max = 1500; } <dt-progress-circle [value]="value" [max]="max"> {{ value }}/{{ max }} </dt-progress-circle> export class ProgressCircleWithTextExample { value = 300; max = 1500; }

The <dt-progress-circle> creates a container that is hidden inside an overlay. It is possible to set the value for the progress circle 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 circle is in. The value will be clamped between the min and max values. With ng-content the content inside the progress-circle can be set.

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

Imports

You have to import the DtProgressCircleModule when you want to use the dt-progress-circle:

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

Accessibility

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

Options & Properties

Inputs

Name Type Default Description
value number 0 Gets and sets the value on the progress-circle.
min number 0 Gets and sets the minimum value on the progress circle
max number 100 Gets and sets the maximum value on the progress circle

Outputs

Name Type Description
valueChange EventEmitter<{ oldValue: number, newValue: number }> Event emitted when the progress circle value changes.

Properties

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

Examples

Progress circle with text in content

´ Loading interactive demo...
<dt-progress-circle [value]="value" [max]="max"> {{ value }}/{{ max }} </dt-progress-circle> export class ProgressCircleWithTextExample { value = 300; max = 1500; } <dt-progress-circle [value]="value" [max]="max"> {{ value }}/{{ max }} </dt-progress-circle> export class ProgressCircleWithTextExample { value = 300; max = 1500; }

Progress circle with icon in content

´ Loading interactive demo...
<dt-progress-circle [value]="30"> <dt-icon name="agent"></dt-icon> </dt-progress-circle> export class ProgressCircleWithIconExample {} <dt-progress-circle [value]="30"> <dt-icon name="agent"></dt-icon> </dt-progress-circle> export class ProgressCircleWithIconExample {}

Progress circle with color

´ Loading interactive demo...
<dt-progress-circle [value]="45" [color]="color"></dt-progress-circle> <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 ProgressCircleWithColorExample { color = 'error'; changed(val: string): void { this.color = val; } } <dt-progress-circle [value]="45" [color]="color"></dt-progress-circle> <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 ProgressCircleWithColorExample { color = 'error'; changed(val: string): void { this.color = val; } }

Progress circle change

´ Loading interactive demo...
<p>Value passed to the progress circle: {{ value }}</p> <dt-progress-circle (valueChange)="changed($event)" [value]="value" ></dt-progress-circle> <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 ProgressCircleChangeExample { 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 circle: {{ value }}</p> <dt-progress-circle (valueChange)="changed($event)" [value]="value" ></dt-progress-circle> <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 ProgressCircleChangeExample { 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; } }