Circular Progress Bar In Angular 9

In this article, we will learn how to create a circular percentage progress bar in Angular 9.

A progress bar is a graphical control element used to show a user how far along he/she is in a process.

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new circular-progress-bar

Now, open the newly created project and execute the command given below.

npm install ng-circle-progress

Open the app.module.ts file and add the code in it.

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 { }

Open the app.component.html file and add the code in it.

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

Output:

The ng-circle-progress package provides many other progress bar design options and properties.

Try Out The Demo!

– – –

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Display Loader/Spinner On Each HTTP Calls In Angular 9