Angular Circular Progress Component Overview

The Ignite UI for Angular Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes.

Angular Circular Progress Example

Getting Started with Ignite UI for Angular Circular Progress

To get started with the Ignite UI for Angular Circular Progress component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

The next step is to import the IgxProgressBarModule in the app.module.ts file:

// app.module.ts

...
import { IgxProgressBarModule } from 'igniteui-angular';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxProgressBarModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxCircularProgressBarComponent as a standalone dependency, or use the IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-circular-bar
        [value]="100"
        [animate]="true"
        class="custom-size"
    ></igx-circular-bar>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES]
    /* or imports: [IgxCircularProgressBarComponent] */
})
export class HomeComponent {}

Now that you have the Ignite UI for Angular Progress Bar module or directives imported, you can start using the igx-circular-bar component.

Using the Angular Circular Progress

To have a better understanding how everything works, let's create a simple example, like the one in the demo:

<igx-circular-bar
    [value]="100"
    [animate]="true"
    class="custom-size"
></igx-circular-bar>

After that, we should have the demo sample in your browser.

Note

The igx-circular-bar emits onProgressChanged event that outputs an object like this {currentValue: 65, previousValue: 64} on each step.

Note

The default progress increments by 1% of the max value per update cycle, this happens if the step value is not defined. To change the update rate, the step value should be defined.```

Indeterminate Progress

If you want to track a process that is not determined precisely, you can set the indeterminate input property to true.

<igx-circular-bar
    [animate]="false"
    [indeterminate]="true"
    [textVisibility]="false"
></igx-circular-bar>

Note

You can hide the text of the circular progress bar by setting the textVisibility property to false.

The final result should be:

Dynamic Progress

You can dynamically change the value of the progress by using external controls like buttons. To achieve this, we can bind the value to a class property:

<div class="sample-content">
    <igx-circular-bar
        [value]="currentValue"
        [max]="100"
        [animate]="true"
        class="custom-size">
    </igx-circular-bar>
    <div class="button-container">
        <button igxButton="icon" (click)="decrementProgress()">
            <igx-icon fontSet="material">remove</igx-icon>
        </button>
        <button igxButton="icon" (click)="incrementProgress()">
            <igx-icon fontSet="material">add</igx-icon>
        </button>
    </div>
</div>

Add the methods that increment and decrement the value:

@Component({...})
export class HomeComponent {
    public currentValue: number;

    public ngOnInit() {
        this.currentValue = 0;
    }

    public incrementProgress() {
        this.currentValue += 10;
        if (this.currentValue > 100) {
            this.currentValue = 100;
        }
    }

    public decrementProgress() {
        this.currentValue -= 10;
        if (this.currentValue < 0) {
            this.currentValue = 0;
        }
    }
}

Add some styles:

.custom-size {
  width: 100px;
  height: 100px;
}

.sample-content {
  width: 300px;
  display: flex;
  align-items: center;
  margin-top: 30px;
}

Gradient Progress

One way to customize the progress bar is to use a color gradient instead of a solid color. This can be done in one of two ways - by using the IgxProgressBarGradientDirective directive or by implementing a custom theme, albeit custom themes support up to two color stops.

If you want to create a gradient with just two color stops, you can do so by using a custom theme. Create a list of colors and pass it to the $progress-circle-color theme parameter:

$colors: #695cf9, #ef017c;

$custom-theme: progress-circular-theme(
    $progress-circle-color: $colors
    
);

You can learn more about styling the circular progress bar in the Styling Section

To provide a gradient that has more than 2 color stops, we have to use the directive on an ng-template in our igx-circular-bar like that:

<div class="sample-content">
  <igx-circular-bar
    [value]="currentValue"
    [max]="100"
    [animate]="true"
    class="custom-size">
      <ng-template igxProgressBarGradient let-id>
          <svg:linearGradient [id]="id" gradientTransform="rotate(90)">
              <stop offset="0%"   stop-color="#ff9a40"/>
              <stop offset="50%" stop-color="#1eccd4"/>
              <stop offset="100%" stop-color="#ff0079"/>
          </svg:linearGradient>
      </ng-template>
  </igx-circular-bar>

  <div class="button-container">
      <button igxButton="icon" (click)="removeProgress()">
          <igx-icon fontSet="material">remove</igx-icon>
      </button>
      <button igxButton="icon" (click)="addProgress()">
          <igx-icon fontSet="material">add</igx-icon>
      </button>
  </div>
</div>

After reproducing the steps above, you should get this as a result:

Styling

To get started with styling the circular progress bar, we need to import the index file, where all the theme functions and component mixins live:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the progress-circular-theme and accepts the $base-circle-color and the $progress-circle-color parameters.

$custom-theme: progress-circular-theme(
    $base-circle-color: lightgray,
    $progress-circle-color: rgb(32, 192, 17)
);

Including Themes

The last step is to include the component theme in our application.

If $legacy-support is set to true, include the component theme like that:

 @include progress-circular($custom-theme);

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep

:host {
     ::ng-deep {
        @include progress-circular($custom-theme);
    }
}

If $legacy-support is set to false(default), include the component css variables like that:

@include css-vars($custom-theme);

Note

If the component is using an Emulated ViewEncapsulation, you still have to use :host because you need a global selector in order to override the variables.

:host {
    @include css-vars($custom-theme);
}

Demo

API

• IgxCircularProgressBarComponent
• IgxCircularProgressBarComponent Styles