Progress circle

The progress circle component is used to visualize progress.

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

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.
´ 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; } }

Properties

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

Variants

Progress circles can be used with icons or text as 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 {}
´ 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; }

Colors

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

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

Accessibility

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