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';
  3. @Component({
  4. selector: 'app-progressbardemo',
  5. templateUrl: './progressbardemo.component.html',
  6. styleUrls: ['./progressbardemo.component.css']
  7. })
  8. export class ProgressbardemoComponent implements OnInit {
  10. constructor() { }
  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. }
  25. ProgressBar() {
  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;
  46. } else {
  47. document.getElementById("countdown").innerHTML = timeleft + "";
  48. }
  49. timeleft -= 1;
  50. }, 1000);
  51. setInterval(() => clearInterval(downloadTimer), 6000)
  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>
  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>
  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>
  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. }
  10. .mat-progress-bar-buffer {
  11. background-color: #e9ecef !important;
  12. }
  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
  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.