Post
Ask Question

Progress Bar in AngularJS

In this article, we will discuss how to create a progress bar using normal html and Angular js aince during the development of webpages, sometimes we need to show the progress indication for illustrating any process. So for this purpose, the progress bar is the best control. It can be dynamically created in Angular js.

For doing this, we first create a html file named index.html and write down the below code:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title>Progress Bar</title>  
  6.     <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />  
  7.     <script src="../../Scripts/angular.min.js"></script>  
  8.     <script src="IndexController.js"></script>  
  9. </head>  
  10.   
  11. <body data-ng-app="TestApp" data-ng-controller="IndexController as model">  
  12.     <div class="row animated fadeInRight">  
  13.         <div class="col-lg-12">  
  14.             <div class="rowDiv">  
  15.                 <h3>{{model.message}}</h3>  
  16.             </div>  
  17.         </div>  
  18.         <div class="col-lg-12">  
  19.             <div class="rowDiv">  
  20.                 <input type="button" value="Start" class="btn-default" data-ng-click="model.fnStart();" />  
  21.                 <input type="button" value="Restart" class="btn-default" data-ng-click="model.fnRestart();" />  
  22.             </div>  
  23.         </div>  
  24.         <<div class="col-lg-12">  
  25.             <div class="rowDiv">  
  26.                 <div style="background-color:#808080;" ng-style="{'width':model.width}">{{model.progress}}%</div>  
  27.             </div>  
  28.     </div>  
  29.     </div>  
  30. </body>  
  31.   
  32. </html>  
Now, add a javascript file for the controller of that html file with name indexcontroller.js and write down the below code:
  1. 'use strict';  
  2. var testApp = angular.module('TestApp', []);  
  3. testApp.controller('IndexController', ['$http', '$timeout', '$interval', function($http, $timeout, $interval)  
  4. {  
  5.     var self = this;  
  6.     self.message = 'Progress Bar';  
  7.     self.progress = 0;  
  8.     self.start = 0;  
  9.     self.width = '0%';  
  10.     self.fnStart = function()  
  11.     {  
  12.         $interval(progressStatus, 100);  
  13.     }  
  14.     self.fnRestart = function()  
  15.     {  
  16.         self.progress = 0;  
  17.         self.start = 0;  
  18.         $interval(progressStatus, 100);  
  19.     }  
  20.   
  21.     function progressStatus()  
  22.     {  
  23.         self.progress = Math.min(100, parseInt(100.0 * self.start / 100));  
  24.         self.start += 1;  
  25.         self.width = self.progress + '%';  
  26.     }  
  27. }]);  
Now, run the code and the output will be as below: