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.

<dt-progress-circle [value]="75" aria-label="Progress for something">


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

  imports: [DtProgressCircleModule],
class MyModule {}


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

With ng-content the content inside the progress-circle can be set.


Name Type Description
valueChange EventEmitter<{ oldValue: number, newValue: number }> Event emitted when the progress circle value changes.
<p>Value passed to the progress circle: {{ value }}</p>
  aria-label="Progress in circular shape for something"
  <button dt-button (click)="value = value - 10">decrease by 10</button>
  <button dt-button (click)="value = value + 10">increase by 10</button>
<p *ngIf="oldValue !== null">
  Event: OldValue: {{ oldValue }}
  <br />
  NewValue: {{ newValue }}


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


Progress circles can be used with icons or text as content.

<dt-progress-circle [value]="30" aria-label="Progress of users used from quota">
  <dt-icon name="user-uem"></dt-icon>
  aria-label="Progress for something"
  {{ value }}/{{ max }}


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

  aria-label="Progress in circular shape with colored indication"
  <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>


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