如何使用 Material Design Lite 创建漂亮的进度条？

Material Design Lite（简称 MDL）是谷歌发布的一个精简版的 Material Design 库，提供了一些常用的 UI 组件，如按钮、卡片、标签等等。本文将介绍 MDL 中如何创建漂亮的进度条，内容详细，有深度和学习以及指导意义，同时包含示例代码。

什么是进度条？

进度条是用来表明某个操作的进度，通常用于展示下载、上传、加载等操作的进度。进度条分为不确定进度条和确定进度条。不确定进度条通常是一个无限循环的动画，表达一种操作正在进行中的状态，而确定进度条则是通过具体的百分比或数值来表达操作的进度。

如何使用 MDL 创建进度条？

在 MDL 中创建进度条非常容易，只需要在 HTML 中添加几个元素并加上相应的 CSS 样式即可。下面我们将详细介绍如何创建一个确定进度条和一个不确定进度条。

确定进度条

确定进度条分为水平进度条和环形进度条，下面我们将分别介绍如何使用 MDL 创建这两种类型的进度条。

水平进度条

水平进度条通常用于展示一个操作的具体进度百分比，下面来看一下它的 HTML 结构：

<div class="mdl-progress mdl-js-progress"></div>

我们只需要在一个 div 中添加 mdl-progress 和 mdl-js-progress 两个类名即可创建一个简单的水平进度条。不过为了让进度条能够工作，我们还需要借助 MDL 的 JS 功能，所以在引入 MDL 的 CSS 样式之后，还需要在页面底部引入 MDL 的 JS 文件：

<!-- Material Design Lite CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<!-- Material Design Lite JS -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

接下来，我们需要通过 JS 来控制进度条的进度。MDL 提供了 MaterialProgress.setProgress(progress) 方法用于设置进度条的进度，其中 progress 参数可以是一个 0 到 1 之间的小数，表示进度条的百分比。

<script>
  var progressBar = document.querySelector('.mdl-js-progress');
  progressBar.MaterialProgress.setProgress(0.5);
</script>

上述代码中，我们首先通过 document.querySelector() 方法获取到进度条的 DOM 元素，然后使用 MaterialProgress.setProgress() 方法设置进度条的进度为 50%。

除了设置进度，MDL 也提供了一些其他的方法和属性，如 MaterialProgress.setBuffer(progress) 方法用于设置进度条的缓存进度、MaterialProgress.setIndeterminate(bool) 方法用于设置进度条是否为不确定状态、MaterialProgress.progress 属性用于获取或设置进度条的进度等等。详细信息可以查看官方文档。

环形进度条

环形进度条通常用于表示一个持续的操作，并不直接显示进度。我们来看一下它的 HTML 结构：

<div class="mdl-spinner mdl-js-spinner"></div>

和之前一样，我们只需要在一个 div 中添加 mdl-spinner 和 mdl-js-spinner 两个类名即可创建一个简单的环形进度条。同样需要在底部引入 MDL 的 JS 文件。

<!-- Material Design Lite JS -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

如果需要在操作完成后停止环形进度条的转动，可以使用 MaterialSpinner.stop() 方法，例如：

<script>
  var spinner = document.querySelector('.mdl-js-spinner');
  spinner.MaterialSpinner.stop();
</script>

上述代码中，我们使用 document.querySelector() 方法获取到环形进度条的 DOM 元素，然后使用 MaterialSpinner.stop() 方法停止转动。

不确定进度条

不确定进度条通常是一个无限循环的动画，表示一种持续操作的状态。在 MDL 中，不确定进度条分为两种形式：循环进度条和进度环，下面我们将分别介绍如何创建这两种类型的进度条。

循环进度条

循环进度条通常是一个圆形的动画，用于表示一个操作正在进行中。在 MDL 中，我们可以使用 mdl-spinner--single-color 类名来创建一个单色的循环进度条，如下所示：

<div class="mdl-spinner mdl-js-spinner mdl-spinner--single-color"></div>

和之前一样，我们只需要在一个 div 中添加 mdl-spinner、mdl-js-spinner 和 mdl-spinner--single-color 三个类名即可创建一个简单的循环进度条。同样需要在底部引入 MDL 的 JS 文件。

<!-- Material Design Lite JS -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

不过需要注意的是，由于 MDL 的 1.3.0 版本中存在一个已知的 bug，如果使用 mdl-spinner--single-color 类名创建循环进度条，动画会变得比较卡顿。而使用默认的循环进度条，则不会出现这个问题。

进度环

进度环是一种扁平的圆环动画，用于表示一个操作正在进行中。在 MDL 中，我们可以使用 mdl-progress__indeterminate-circle-clipper-left 和 mdl-progress__indeterminate-circle-clipper-right 两个类名来创建一个进度环，如下所示：

<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate mdl-progress__indeterminate-circle-clipper-left"></div>
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate mdl-progress__indeterminate-circle-clipper-right"></div>

和之前一样，我们只需要在一个 div 中添加 mdl-progress、mdl-js-progress、mdl-progress__indeterminate、mdl-progress__indeterminate-circle-clipper-left 或 mdl-progress__indeterminate-circle-clipper-right 这几个类名即可创建一个简单的进度环。同样需要在底部引入 MDL 的 JS 文件。

<!-- Material Design Lite JS -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

总结

进度条是一个常用的 UI 组件，可以用于表示操作的进度，通过本文的介绍，我们可以轻松地使用 MDL 创建漂亮的进度条。无论是确定进度条还是不确定进度条，只需要简单的 HTML 结构和一些 CSS 样式，再加上 MDL 提供的 JS 功能，就可以轻松地实现一个漂亮、实用的进度条。希望本文对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dc5fb968c7c53b0c671c4