Material Design Lite（简称 MDL）是谷歌发布的一个精简版的 Material Design 库，提供了一些常用的 UI 组件，如按钮、卡片、标签等等。本文将介绍 MDL 中如何创建漂亮的进度条，内容详细，有深度和学习以及指导意义，同时包含示例代码。
什么是进度条？
进度条是用来表明某个操作的进度，通常用于展示下载、上传、加载等操作的进度。进度条分为不确定进度条和确定进度条。不确定进度条通常是一个无限循环的动画，表达一种操作正在进行中的状态，而确定进度条则是通过具体的百分比或数值来表达操作的进度。
如何使用 MDL 创建进度条？
在 MDL 中创建进度条非常容易，只需要在 HTML 中添加几个元素并加上相应的 CSS 样式即可。下面我们将详细介绍如何创建一个确定进度条和一个不确定进度条。
确定进度条
确定进度条分为水平进度条和环形进度条，下面我们将分别介绍如何使用 MDL 创建这两种类型的进度条。
水平进度条
水平进度条通常用于展示一个操作的具体进度百分比，下面来看一下它的 HTML 结构：
---- ------------------- -----------------------
我们只需要在一个 div 中添加 mdl-progress 和 mdl-js-progress 两个类名即可创建一个简单的水平进度条。不过为了让进度条能够工作，我们还需要借助 MDL 的 JS 功能，所以在引入 MDL 的 CSS 样式之后，还需要在页面底部引入 MDL 的 JS 文件：
---- -------- ------ ---- --- --- ----- ---------------- --------------------------------------------------------------- ----- ---------------- ----------------------------------------------------------------- ---- -------- ------ ---- -- --- ------- ----- ------------------------------------------------------------
接下来，我们需要通过 JS 来控制进度条的进度。MDL 提供了 MaterialProgress.setProgress(progress) 方法用于设置进度条的进度，其中 progress 参数可以是一个 0 到 1 之间的小数，表示进度条的百分比。
-------- --- ----------- - ------------------------------------------- ---------------------------------------------- ---------
上述代码中，我们首先通过 document.querySelector() 方法获取到进度条的 DOM 元素，然后使用 MaterialProgress.setProgress() 方法设置进度条的进度为 50%。
除了设置进度，MDL 也提供了一些其他的方法和属性，如 MaterialProgress.setBuffer(progress) 方法用于设置进度条的缓存进度、MaterialProgress.setIndeterminate(bool) 方法用于设置进度条是否为不确定状态、MaterialProgress.progress 属性用于获取或设置进度条的进度等等。详细信息可以查看官方文档。
环形进度条
环形进度条通常用于表示一个持续的操作，并不直接显示进度。我们来看一下它的 HTML 结构：
---- ------------------ ----------------------
和之前一样，我们只需要在一个 div 中添加 mdl-spinner 和 mdl-js-spinner 两个类名即可创建一个简单的环形进度条。同样需要在底部引入 MDL 的 JS 文件。
---- -------- ------ ---- -- --- ------- ----- ------------------------------------------------------------
如果需要在操作完成后停止环形进度条的转动，可以使用 MaterialSpinner.stop() 方法，例如：
-------- --- ------- - ------------------------------------------ ------------------------------- ---------
上述代码中，我们使用 document.querySelector() 方法获取到环形进度条的 DOM 元素，然后使用 MaterialSpinner.stop() 方法停止转动。
不确定进度条
不确定进度条通常是一个无限循环的动画，表示一种持续操作的状态。在 MDL 中，不确定进度条分为两种形式：循环进度条和进度环，下面我们将分别介绍如何创建这两种类型的进度条。
循环进度条
循环进度条通常是一个圆形的动画，用于表示一个操作正在进行中。在 MDL 中，我们可以使用 mdl-spinner--single-color 类名来创建一个单色的循环进度条，如下所示：
---- ------------------ -------------- ---------------------------------
和之前一样，我们只需要在一个 div 中添加 mdl-spinner、mdl-js-spinner 和 mdl-spinner--single-color 三个类名即可创建一个简单的循环进度条。同样需要在底部引入 MDL 的 JS 文件。
---- -------- ------ ---- -- --- ------- ----- ------------------------------------------------------------
不过需要注意的是，由于 MDL 的 1.3.0 版本中存在一个已知的 bug，如果使用 mdl-spinner--single-color 类名创建循环进度条，动画会变得比较卡顿。而使用默认的循环进度条，则不会出现这个问题。
进度环
进度环是一种扁平的圆环动画，用于表示一个操作正在进行中。在 MDL 中，我们可以使用 mdl-progress__indeterminate-circle-clipper-left 和 mdl-progress__indeterminate-circle-clipper-right 两个类名来创建一个进度环，如下所示：
---- ------------------- --------------- --------------------------- ------------------------------------------------------- ---- ------------------- --------------- --------------------------- --------------------------------------------------------
和之前一样，我们只需要在一个 div 中添加 mdl-progress、mdl-js-progress、mdl-progress__indeterminate、mdl-progress__indeterminate-circle-clipper-left 或 mdl-progress__indeterminate-circle-clipper-right 这几个类名即可创建一个简单的进度环。同样需要在底部引入 MDL 的 JS 文件。
---- -------- ------ ---- -- --- ------- ----- ------------------------------------------------------------
总结
进度条是一个常用的 UI 组件，可以用于表示操作的进度，通过本文的介绍，我们可以轻松地使用 MDL 创建漂亮的进度条。无论是确定进度条还是不确定进度条，只需要简单的 HTML 结构和一些 CSS 样式，再加上 MDL 提供的 JS 功能，就可以轻松地实现一个漂亮、实用的进度条。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646dc5fb968c7c53b0c671c4