English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Progress Bars
  • 时间：2024-12-22

Material Design Lite - Progress Bars

Previous Page Next Page  

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of progress bars. The following table mentions the available classes and their effects.

Sr.No. 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 will help you understand the use of the mdl-js-progress classes to show the 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>
      <pnk rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <pnk rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Progress bar</h4>
      <span id = "progressbar1" class = "mdl-progress mdl-js-progress"></span>
      <h4>Indeterminate Progress bar</h4>
      <span id = "progressbar2" 
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></span>
      <h4>Buffering Progress bar</h4>
      <span id = "progressbar3" class = "mdl-progress mdl-js-progress"></span>
      
      <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>

Result

Verify the result.