Barista - Progress circle

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">
</dt-progress-circle>

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

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

Outputs

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>
<dt-progress-circle
  (valueChange)="changed($event)"
  [value]="value"
  aria-label="Progress in circular shape for something"
></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>

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.

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

<dt-progress-circle
  [value]="value"
  [max]="max"
  aria-label="Progress for something"
>
  {{ value }}/{{ max }}
</dt-progress-circle>

Colors

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

<dt-progress-circle
  [value]="45"
  [color]="color"
  aria-label="Progress in circular shape with colored indication"
>
</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>

Accessibility

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