Angular Material Progress Bar

The <mat-progress-bar> is a horizontal progress-bar used for indicating the progress and activity.

Progress Bar Modes

It supports four modes: determinate, indeterminate, buffer, and query.

Determinate

Determinate operations are those where the percentage of the operation is complete.

app.component.html

app.component.ts

import {Component} from '@angular/core';
/**
 * @title Determinate progress-bar
 */
@Component({
  selector: 'progress-bar-determinate-example',
  templateUrl: 'progress-bar-determinate-example.html',
})
export class ProgressBarDeterminateExample {}

Output:

It is the default mode, and the value property represents the progress.

Indeterminate

In an Indeterminate operation, the user is asked to wait until the previous one finishes, and it is not necessary to indicate how much time it will use the indefinite pointer.

app.component.html

app.component.ts

import {Component} from '@angular/core';
/**
 * @title Indeterminate progress-bar
 */
@Component({
  selector: 'progress-bar-indeterminate-example',
  templateUrl: 'progress-bar-indeterminate-example.html',
})
export class ProgressBarIndeterminateExample {}

Output:

In this mode, the value property is ignored.

Buffer

Use the buffer mode of the progress-bar to indicate the activity or loading of the server.

app.component.html

app.component.ts

import {Component} from '@angular/core';
/**
 * @title Buffer progress-bar
 */
@Component({
  selector: 'progress-bar-buffer-example',
  templateUrl: 'progress-bar-buffer-example.html',
})
export class ProgressBarBufferExample {}

Output:

In the "buffer" mode, the value determines the primary bar's progress, while the buffer is used to show the buffering progress.

Query

Use the query-mode of the progress-bar to indicate pre-loading before the actual loading begins.

app.component.html

app.component.ts

import {Component} from '@angular/core';

/**
 * @title Query progress-bar
 */
@Component({
  selector: 'progress-bar-query-example',
  templateUrl: 'progress-bar-query-example.html',
})
export class ProgressBarQueryExample {}

Output:

In "Query" mode, the progress-bar inversion presents as an indefinite bar. After the response progress is available, the mode must be determined to express the progress. In this mode, the value property is ignored.

Theming

Using the color property, the color of the progress bar will change. By default, progress-bars use the theme's primary color. It can be changed to accent or warn.

Accessibility

Each progress bar should be given a meaningful label by area-label or area-labeledby.

<Mat-progress-spinner> and <mat-spinner> are a circular indicator of activity or progress. The md-progress-circular and md-progress-linear are the progress directives, and they show loading content messages in the application.

The following table shows the parameters and description of many attributes of md-progress-circular.

Sr.No	Parameter	Description
1	*md-mode	Select one of two modes: 'determinate' and ' Indeterminate. ' If the md-mode value is specified as undefined or 1 of two valid modes, .ng-hide will auto-apply as a style to the component; md-mode = "indeterminate" will be injected automatically as an attribute. If value = "is also specified, then md-mode =" determined "will be auto-injected.
2	value	Indeterminate mode represents the percentage of circular progress. By default, it is 0.
3	md-diameter	It specifies the diameter of the circular progress. The value may be a percentage (eg '25%') or a pixel-size value (eg '48'). If the attribute is not present, then a default value of '48px' is assumed.
4	md-buffer-value	Indeterminate mode, The number represents the percentage of the primary progress bar. By default, It is also 0.

Example 1:

The example shows the use of the md-progress-circular directive and the uses of circular progress bars.

am_circularprogressbars.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('progressbarsController', progressbarsController);
         function progressbarsController ($scope, $interval) {
            var self = It,  j = 0, counter = 0;
            self.modes = [ ];
            self.activated = true;
            self.determinateValue = 30;
            self.toggleActivation = function() {
               if ( !self.activated ) self.modes = [ ];
               if (  self.activated ) j = counter = 0;
            };
            $interval(function() {
               self.determinateValue += 1;
               if (self.determinateValue > 100) {
                  self.determinateValue = 30;
               }
               if ( (j < 5) && !self.modes[j] && self.activated ) {
                  self.modes[j] = 'indeterminate';
               }
               if ( counter++ % 4 == 0 ) j++;
            }, 100, 0, true);
         }
      </script>      
   </head>
   <body ng-app = "firstApplication"> 
      <div id = "progressbarsContainer" ng-controller = "progressbarsController as ctrl"
         layout = "column" ng-cloak>
         <h4 style = "margin-top:10px">Determinate </h4><p></p>
         <div layout = "row" layout-sm = "column" layout-align = "space-around">
            <md-progress-circular md-mode = "determinate"
               value = "{{ctrl.determinateValue}}"></md-progress-circular>
         </div>
         <h4 style = "margin-top:10px">Indeterminate </h4>
         <div layout = "row" layout-sm = "column" layout-align = "space-around">
            <md-progress-circular md-mode = "indeterminate"></md-progress-circular>
         </div>
         <h4 style = "margin-top:10px">Theme Based</h4>
         <div layout = "row" layout-sm = "column" layout-align = "space-around">
            <md-progress-circular class = "md-hue-2" md-mode = "{{ctrl.modes[0]}}" 
               md-diameter = "20px"></md-progress-circular>
            <md-progress-circular class = "md-accent" md-mode = "{{ctrl.modes[1]}}"
               md-diameter = "40"></md-progress-circular>
            <md-progress-circular class = "md-accent md-hue-1" md-mode = "{{ctrl.modes[2]}}"
               md-diameter = "60"></md-progress-circular>
            <md-progress-circular class = "md-warn md-hue-3" md-mode = "{{ctrl.modes[3]}}"
               md-diameter = "70"></md-progress-circular>
            <md-progress-circular md-mode = "{{ctrl.modes[4]}}" md-diameter = "96">
               </md-progress-circular>
         </div>
         <hr ng-class = "{'visible' : ctrl.activated}">
         <div id = "loaders" layout = "row" layout-align = "start center">
            <p>Progress Circular Indicators:    </p>
            <h5>Off</h5>
            <md-switch
               ng-model = "ctrl.activated"
               ng-change = "ctrl.toggleActivation()"
               aria-label = "Toggle Progress Circular Indicators">
               <h5>On</h5>
            </md-switch>
         </div>
      </div>
   </body>
</html>

Output:

Example: 2

The following example shows the use of linear progress bars.

am_linearprogressbars.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('progressbarsController', progressbarsController);
         function progressbarsController ($scope, $interval) {
            var self = It,  j = 0, counter = 0;
            self.modes = [ ];
            self.activated = true;
            self.determinateValue = 30;
            self.toggleActivation = function() {
               if ( !self.activated ) self.modes = [ ];
               if (  self.activated ) j = counter = 0;
            };
            $interval(function() {
               self.determinateValue += 1;
               if (self.determinateValue > 100) {
                  self.determinateValue = 30;
               }
               if ( (j < 5) && !self.modes[j] && self.activated ) {
                  self.modes[j] = 'indeterminate';
               }
               if ( counter++ % 4 == 0 ) j++;
            }, 100, 0, true);
         }
      </script>      
   </head>
   <body ng-app = "firstApplication"> 
      <div id = "progressbarsContainer" ng-controller = "progressbarsController as ctrl"
         layout = "column" ng-cloak>
         
         <h4 style = "margin-top:10px">Determinate </h4><p></p>
         <div layout = "row" layout-sm = "column" layout-align = "space-around">
            <md-progress-linear md-mode = "determinate"
               value = "{{ctrl.determinateValue}}"></md-progress-circular>
         </div>
         <h4 style = "margin-top:10px">Indeterminate </h4>
         <div layout = "row" layout-sm = "column" layout-align = "space-around">
            <md-progress-linear md-mode = "indeterminate"></md-progress-circular>
         </div>
         <h4 style = "margin-top:10px">Buffer</h4>
         <div layout = "row" layout-sm = "column" layout-align = "space-around">
            <md-progress-linear class = "md-warn" md-mode = "{{ctrl.modes[0]}}"
               value = "{{ctrl.determinateValue}}"
               md-buffer-value = "{{ctrl.determinateValue2}}"></md-progress-linear>
         </div>
         <hr ng-class = "{'visible' : ctrl.activated}">
         <div id = "loaders" layout = "row" layout-align = "start center">
            <p>Progress Buffer Indicators:    </p>
            <h5>Off</h5>
            <md-switch
               ng-model = "ctrl.activated"
               ng-change = "ctrl.toggleActivation()"
               aria-label = "Toggle Buffer Progress Indicators">
               <h5>On</h5>
            </md-switch>
         </div>
      </div>
   </body>
</html>

Output: