Circular Progress Bar In Angular

The Code Points September 15, 2022 0

In this article, we learn how to create a circular progress bar in an angular application. A progress bar is a graphical control element that displays a user's current process progress.

So let's start with the implementation,

First, we need to create a new angular application using the following command.

ng new circular-progress-bar-example

Now, we need to add the ng-circle-progress NPM package using the following command.

npm install ng-circle-progress

Now, we need to add NgCircleProgressModule into the app.module.ts file using the following code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgCircleProgressModule } from 'ng-circle-progress';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgCircleProgressModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, add the following code under the app.component.html file.

<circle-progress [percent]="70" [radius]="100" [outerStrokeWidth]="20" [innerStrokeWidth]="10"
  [outerStrokeColor]="'#3777BE'" [innerStrokeColor]="'#7f9fc1'" [animation]="true" [animationDuration]="300"
  [subtitleFontSize]="20"></circle-progress>

Numerous additional progress bar design options and characteristics are offered by the ng-circle-progress package. you can check here.

Conclusion

In this article, we learned how to add a circular progress bar in the angular application using the ng-circle-progress package.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.