The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the display various types of
progress bars. The below table mentions the available classes and their
effects.
mdl_progressbars.htm
| S.N. | Class Name & Description |
|---|---|
| 1 | mdl-js-progress Sets basic MDL behavior to progress indicator and is a required class. |
| 2 | mdl-progress__indeterminate Sets animation to progress indicator and is an optional class. |
Example
The following example showcases the use of mdl-js-progress classes to show different types of progress bars.mdl_progressbars.htm
<html> <head> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <h4>Default Progress bar</h4> <div id="progressbar1" class="mdl-progress mdl-js-progress"></div> <h4>Indeterminate Progress bar</h4> <div id="progressbar2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div> <h4>Buffering Progress bar</h4> <div id="progressbar3" class="mdl-progress mdl-js-progress"></div> <script language="javascript"> document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', function() { this.MaterialProgress.setProgress(44); }); document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded', function() { this.MaterialProgress.setProgress(33); this.MaterialProgress.setBuffer(87); }); </script> </body> </html>
No comments:
Post a Comment