How To Create Dynamic Progress Bar In Angular Application

Introduction

In this article, we will learn how to create a progress bar with countdown in angular application

Prerequisites

Let's create an Angular project by using the following command.

Open this project in Visual Studio Code and install angular Material by using the following command.

Now install bootstrap by using following command.

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line

Now create a new component using the following command,

Now open progressbardemo.component.ts file and add the following code,

Now open progressbardemocomponent.html file and add the following code

<div class="row" style="margin-top:10px;margin-bottom: 24px;">
<div class="col-sm-12 btn btn-success">
How To create Dynamic Progress Bar with timer In Angular Application
</div>
</div>
<div class="container">
<div style="position: relative">
<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
<span style="position: absolute; top: 0.5em;" [ngStyle]="{'left': progress + '%'}"></span>
</div>
<div class="d-flex justify-content-end">
<span class="completed_progress_bar">{{progress}}% completed (<span id="countdown"></span> Seconds to complete)</span>
</div>
<button class="btn btn-success" (click)="Showprogressbar()">Show Progress Bar</button>
</div>

Now open progressbardemo.component.css file and add the following css classes.

Now open app.module.ts file and add the following code,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {ProgressBarModule} from "angular-progress-bar"
import { ProgressbardemoComponent } from './progressbardemo/progressbardemo.component';
@NgModule({
declarations: [
AppComponent,
ProgressbardemoComponent
],
imports: [
BrowserModule,,HttpClientModule,ProgressBarModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now open app.component.html file and add the following code,

Now, run the application using the 'npm start' command and check the result.

Now click on Show progress bar button and check,

In this article, we learned how to create a progress bar with countdown in angular application.