📜  材料设计精简版-进度条

📅  最后修改于: 2020-10-22 05:53:22             🧑  作者: Mango


MDL提供了一系列CSS类,以应用各种预定义的视觉和行为增强功能并显示不同类型的进度条。下表列出了可用的类及其效果。

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.

以下示例将帮助您了解mdl-js-progress类的使用,以显示不同类型的进度条。

mdl_progressbars.htm


      
      
            
   
   
   
      Default Progress bar
      
      Indeterminate Progress bar
      
      Buffering Progress bar
      
      
      
         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);
         });
      
   
   

结果

验证结果。