Material Design 是一种设计语言，由 Google 推出，它的设计风格简洁、平面化，注重材质质感和动画效果。在 Material Design 中，进度条是很重要的组件之一，它可以方便的展示用户操作的进行度，下面介绍一下制作 Material Design 进度条的最佳方法。
HTML 结构
下面是一个基本的 Material Design 进度条的 HTML 结构：
<div class="progress"> <div class="determinate"></div> </div>
其中，外层 div 的 class 为 progress，内层 div 的 class 为 determinate。具体作用后面介绍。
CSS 样式
接下来是 CSS 样式的实现。
-- -------------------- ---- ------- --------- - --------- --------- ------- ---- ------ ----- ----------------- -------- - ------------ - --------- --------- ---- -- ----- -- ------- ----- ----------------- -------- ----------- ----- ---- ------- -
这里有两个 class：progress 和 determinate。
其中，progress 就是进度条的背景，它的高度为 4px，宽度为 100%，颜色为 #e0e0e0。determinate 是进度条的前景，它的高度是 100%，颜色为 #4CAF50，通过 CSS 的 transition 属性使其宽度变化时拥有一个渐进的效果。
JavaScript
最后，是 JavaScript 部分的实现。
-- -------------------- ---- ------- -- ------- --- -------- - ------------------------------------ -------- ----------------------- - -- ------ --- ----------- - --------------------------------------- -- ------- ----------------------- - ------- - ---- - -- -- -------------- ---------- -------------------
这里的 JavaScript 代码实现了一个 updateProgress 函数，该函数可以设定前景 div 的宽度。当它被调用时，可以传入一个表示百分比的值，并且将该值设置为前景 div 的宽度。
总结
通过上述的 HTML、CSS 和 JavaScript 的代码实现，我们已经可以创建一个 Material Design 进度条了。最后，我们可以将该进度条应用到我们的项目中，提高用户体验。
示例代码：https://codepen.io/anon/pen/dyMzbLP
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acc60748841e98948c93de