Material Design Lite - Thanh tiến trình

MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi được xác định trước khác nhau và hiển thị các loại thanh tiến trình khác nhau. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.

Sr.No. Tên & Mô tả Lớp học
1

mdl-js-progress

Đặt hành vi MDL cơ bản thành chỉ báo tiến trình và là một lớp bắt buộc.

2

mdl-progress__indeterminate

Đặt hoạt ảnh thành chỉ báo tiến trình và là một lớp tùy chọn.

Thí dụ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-js-progress các lớp để hiển thị các loại thanh tiến trình khác nhau.

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>

Kết quả

Xác minh kết quả.