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
  • Basic Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
Let's create an Angular project by using the following command.
  1. ng new rangesliderdemo    
Open this project in Visual Studio Code and install angular Material by using the following command.
  1. ng add @angular/material  
Now install bootstrap by using following command.
  1. npm install bootstrap --save  
Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line
  1. @import '~bootstrap/dist/css/bootstrap.min.css';    
Now create a new component using the following command, 
  1. ng g c progressbardemo  
 Now open progressbardemo.component.ts file and add the following code,
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-progressbardemo',  
  5.   templateUrl: './progressbardemo.component.html',  
  6.   styleUrls: ['./progressbardemo.component.css']  
  7. })  
  8. export class ProgressbardemoComponent implements OnInit {  
  9.   
  10.   constructor() { }  
  11.   
  12.   ngOnInit(): void {  
  13.   }  
  14.   Showprogressbar()  
  15.   {  
  16.     this.Showprogress(); this.timer();  
  17.   }  
  18.   progress = 0;  
  19.  Showprogress()  
  20.  {  
  21.  this.progress = 0;  
  22.    setInterval(() => this.ProgressBar(), 2000)  
  23.    }  
  24.   
  25.  ProgressBar() {  
  26.    
  27.    if (this.progress == 0) {  
  28.      this.progress = this.progress + 1  
  29.    } else {  
  30.      this.progress = this.progress + 1;  
  31.      if (this.progress = this.progress + 30) {  
  32.        this.progress == this.progress + 1;  
  33.        if (this.progress >= 100) {  
  34.          this.progress = 100;  
  35.        }  
  36.      }  
  37.    }  
  38.  }  
  39.   timer()  
  40.   {  
  41.     var timeleft = 6;  
  42.     var downloadTimer = setInterval(function () {  
  43.       if (timeleft <= 0) {  
  44.         clearInterval(downloadTimer); this.progress = 0;  
  45.   
  46.       } else {  
  47.         document.getElementById("countdown").innerHTML = timeleft + "";  
  48.       }  
  49.       timeleft -= 1;      
  50.     }, 1000);  
  51.     setInterval(() => clearInterval(downloadTimer), 6000)  
  52.       
  53.   }  
  54. }   
Now open progressbardemocomponent.html file and add the following code
  1. <div class="row" style="margin-top:10px;margin-bottom: 24px;">          
  2.     <div class="col-sm-12 btn btn-success">          
  3.       How To create Dynamic Progress Bar with timer In Angular Application   
  4.     </div>          
  5.   </div>      
  6.   
  7. <div class="container">  
  8. <div style="position: relative">  
  9.   <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>  
  10.   <span style="position: absolute; top: 0.5em;" [ngStyle]="{'left': progress + '%'}"></span>  
  11. </div>  
  12.   
  13. <div class="d-flex justify-content-end">  
  14.   <span class="completed_progress_bar">{{progress}}% completed (<span id="countdown"></span> Seconds to complete)</span>  
  15. </div>  
  16.   
  17. <button class="btn btn-success" (click)="Showprogressbar()">Show Progress Bar</button>  
  18. </div>  
Now open progressbardemo.component.css file and add the following css classes. 
  1. .mat-progress-bar {    
  2.   display: block;    
  3.   height: 15px !important;    
  4.   overflow: hidden;    
  5.   position: relative;    
  6.   transition: opacity 250ms linear;    
  7.   width: 100%;    
  8. }    
  9.     
  10. .mat-progress-bar-buffer {    
  11.   background-color: #e9ecef !important;    
  12. }    
  13.     
  14. .mat-progress-bar-background {    
  15.   fill:#e9ecef !important;    
  16. }     
Now open app.module.ts file and add the following code, 
  1. import { NgModule } from '@angular/core';    
  2. import { BrowserModule } from '@angular/platform-browser';    
  3. import { HttpClientModule } from '@angular/common/http'    
  4. import { AppComponent } from './app.component';     
  5. import { FormsModule } from '@angular/forms';    
  6. import {ProgressBarModule} from "angular-progress-bar"  
  7. import { ProgressbardemoComponent } from './progressbardemo/progressbardemo.component';  
  8. @NgModule({    
  9.   declarations: [    
  10.     AppComponent,    
  11.     ProgressbardemoComponent   
  12.         
  13.   ],    
  14.   imports: [    
  15.     BrowserModule,,HttpClientModule,ProgressBarModule,FormsModule    
  16.   ],    
  17.   providers: [],    
  18.   bootstrap: [AppComponent]    
  19. })    
  20. export class AppModule { }   
Now open app.component.html file and add the following code, 
  1. <app-progressbardemo></app-progressbardemo>  
Now, run the application using the 'npm start' command and check the result.
 
Now click on Show progress bar button and check,
 

Summary

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


Similar Articles