Material Design Lite Progress Bar
what is Progress Bars in (MDL) ?
what is Progress Bars in (MDL) ?
- Material Design Lite(MDL) component progress is to create a progress bar, visually denoting the state of progress of a activity
- The progress is indicated using a horizontal bar with some ongoing animaiton denoting motion.
- The value of progress bar can either be approximate or percentage values denoting the task completed.
- The Basic objective of using Progress bar component is to provide visual data to the about the ongoing activity, but not yet completed.
- The design and information provided by progess bar has a significant effect on the overall user experience, the data can also be sourced from an external source.
- 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 Class | Description |
|---|---|
| mdl-progress | To create a container for progress bar. |
| mdl-js-progress | To assign MDL behaviour to progress bar component |
| mdl-progress-indeterminate | To apply animation effect to MDL progress bar. |
Sample Code
- The following example showcases the use of mdl-js-progress classes to show different types of progress bars.
<html>
<head>
<scriptsrc="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<linkrel="stylesheet"href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<divid="progressbar1"class="mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<divid="progressbar2"class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<divid="progressbar3"class="mdl-progress mdl-js-progress"></div>
<scriptlanguage="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>