Components

Progress Spinner

Angular Material Progress Spinner is a circular indicator that shows the ongoing progress of a task. A determinate spinner draws an arc that grows with the share of the work that is done, while an indeterminate one keeps turning for as long as the wait lasts. It can be drawn at any diameter and stroke thickness, and BuilderKit restyles the circle so the mat-spinner component matches the rest of the design system.

Official docs API reference

For progress that spans the full width of a page or a panel, the progress bar component shows the same states on a horizontal track.

Example

Below is an example of how BuilderKit restyles the Angular Material Progress Spinner and gives it a more modern appearance.

<mat-spinner diameter="24" mode="determinate" value="60" />

<mat-spinner diameter="24" mode="indeterminate" />

Determinate spinner with a value

A determinate spinner draws an arc around the circle for the share of the work that is done, so the remaining part of the ring stays empty.

<mat-spinner diameter="40" mode="determinate" value="25" />

<mat-spinner diameter="40" mode="determinate" value="60" />

<mat-spinner diameter="40" mode="determinate" value="90" />

Spinner sizes and stroke width

The diameter sets how much room the spinner takes, from a small indicator next to a label to a large one in the middle of a panel, and the stroke width decides how heavy the ring looks.

<mat-spinner diameter="20" />

<mat-spinner diameter="48" />

<mat-spinner diameter="48" strokeWidth="6" />