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.
– – –
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