- Angular Material Tutorial
- Angular Material - Home
- Angular Material - Overview
- Environment Setup
- Angular Material - Autocomplete
- Angular Material - Bottom Sheet
- Angular Material - Cards
- Angular Material - Widgets
- Angular Material - Layouts
- Angular Material - Inputs
- Angular Material - Icons
- Angular Material - Grids
- Angular Material - SideNav
- Angular Material - Fab Speed Dial
- Angular Material - Subheaders
- Angular Material - Swipe
- Angular Material - Switches
- Angular Material - Themes
- Angular Material - Toasts
- Angular Material - Typography
- Angular Material - Virtual Repeat
- Angular Material - WhiteFrame
- Angular Material Useful Resources
- Angular Material - Quick Guide
- Angular Material - Useful Resources
- Angular Material - Discussion
Angular Material - Progress Bars
The md-progress-circular and md-progress-linear are Angular progress directives, and are used to show loading content message in application.
Attributes - md-progress-circular
The following table lists out the parameters and description of the different attributes of md-progress-circular.
Sr.No | Parameter & Description |
---|---|
1 | * md-mode Select from one of the two modes: 'determinate' and 'indeterminate'. If the md-mode value is set as undefined or specified as not 1 of the two (2) valid modes, then .ng-hide will be auto-applied as a style to the component; if not configured, the md-mode = "indeterminate" will be auto injected as an attribute. If value = "" is also specified, however, then md-mode = "determinate" will be autoinjected instead. |
2 | value In determinate mode, this number represents the percentage of the circular progress. By default, this is 0. |
3 | md-diameter This specifies the diameter of the circular progress. The value may be a percentage (eg '25%') or a pixel-size value (eg '48'). If this attribute is not present, then a default value of '48px' is assumed. |
Example
The following example shows the use of the md-progress-circular directive and also 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 = this, 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>
Result
Verify the result.
Attributes - md-progress-linear
The following table lists out the parameters and description of the different attributes of md-progress-linear.
Sr.No | Parameter & Description |
---|---|
1 | * md-mode Select from one of the two modes: 'determinate' and 'indeterminate'. If the md-mode value is set as undefined or specified as not 1 of the two (2) valid modes, then .ng-hide will be auto-applied as a style to the component; if not configured, the md-mode = "indeterminate" will be auto injected as an attribute. If value = "" is also specified, however, then md-mode="determinate" will be auto-injected instead. |
2 | md-buffer-value In determinate mode, this number represents the percentage of the primary progress bar. By default, this is 0. |
3 | md-diameter In the buffer mode, this number represents the percentage of the secondary progress bar. By default, this is 0. |
Example
The following example shows the use of the md-progress-circular directive and also the uses 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 = this, 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>
Result
Verify the result.