在现代网页设计中，进度条是一种非常受欢迎的交互元素。Material Design 风格的进度条受到越来越多的关注，因为它们既美观又具有明显的指示意义。
在这篇文章中，我们将讨论 Material Design 风格的进度条实现技巧，它们可以用于创建具有复杂动画效果和交互效果的进度条。
常规进度条实现
首先，我们来看一下常规的进度条实现方式。通常，我们使用 CSS 来创建一个容器，其中包含两个进度条元素，一个用于表示进度，另一个用于表示未完成的部分。
使用以下 CSS 代码可以实现一个简单的进度条设计：
-- -------------------- ---- ------- ------------- - --------- --------- ------ ----- ------- ---- ----------------- -------- --------- ------- - ------------- --------- - --------- --------- ---- -- ----- -- ------ ---- ------- ----- ----------------- -------- ----------- --- ---- ------------ -
这个 CSS 代码将创建一个名为 .progress-bar 的全宽度容器，其中包含一个名为 .progress 的元素，用于表示进度条的进度。.progress 元素的宽度设置为 50%，这意味着它的进度条完成了一半。
Material Design 风格的进度条
在 Material Design 中，每个进度条都有许多不同的表现形式。有时候，进度条仅仅是一个简单的水平线，它的颜色显示进度条的状态。但有时候，进度条可以是一个运动或者延伸的线条。以下是一些 Material Design 风格的进度条设计：
垂直进度条
垂直进度条是 Material Design 风格的一种进度条类型，它可以在竖直方向上显示进度。我们可以使用以下 HTML 和 CSS 代码来创建一个垂直进度条：
<div class="progress vertical"> <div class="bar"></div> <span class="value">30%</span> </div>
-- -------------------- ---- ------- ------------------ - --------- --------- ------ ---- ------- ------ ----------------- -------- ------- - ----- - ---- - --------- --------- ------- -- ------ ----- ------- ---- ----------------- -------- ----------- --- ---- ------------------ ---- ----- --- -
在这个 CSS 代码中，我们创建了一个垂直进度条，并设置了它的高度为 100px，宽度为 5px。这个进度条是由一个 .bar 元素和一个值元素组成的。.bar 元素表示进度条的进度，当进度增加时，它的高度逐渐增加。.value 元素表示进度条的进度值，它可以通过 JavaScript 来实现自动更新。
线条进度条
线条进度条也是 Material Design 风格的一种进度条类型，它可以在水平或垂直方向上显示进度。我们可以使用以下 HTML 和 CSS 代码来创建一个水平线条进度条：
<div class="progress linear"> <div class="bar"></div> </div>
-- -------------------- ---- ------- ---------------- - --------- --------- ------ ----- ------- ---- ----------------- -------- ------- - ----- - ---- - --------- --------- ---- -- ----- -- ------ ---- ------- ----- ----------------- -------- ----------- --- ---- ------------------ ---- ----- --- -
这个 CSS 代码将创建一个水平线条进度条，并设置它的高度为 3px。进度条由一个 .bar 元素组成，表示进度条的进度。
我们可以通过以下 CSS 代码来创建一个垂直线条进度条：
-- -------------------- ---- ------- ------------------ - --------- --------- ------ ---- ------- ------ ----------------- -------- ------- - ----- - ---- - --------- --------- ------- -- ------ ----- ------- ---- ----------------- -------- ----------- --- ---- ------------------ ---- ----- --- -
在这种情况下，我们将 .progress 元素的宽度设置为 3px，高度设置为 100px。这个进度条由一个 .bar 元素组成，表示进度条的进度。
交互进度条
交互进度条是 Material Design 风格的进度条中，非常常见的一种类型。它可以根据用户的行为或者应用程序的状态来更新进度条的显示。我们可以使用以下 HTML 和 CSS 代码来创建一个交互进度条：
<div class="progress interactive"> <div class="bar"></div> <span class="value">Upload</span> </div>
-- -------------------- ---- ------- --------------------- - --------- --------- ------ ----- ------- ---- ----------------- -------- ------- - ----- ------- -------- - ---- - --------- --------- ---- -- ----- -- ------ --- ------- ----- ----------------- -------- ----------- --- ---- ------------------ ---- ----- --- - ------------ ------ - --------- --------- ------- ------ ----- ---- ---------- ----------------- ---------- ----- ------------ ----- --------------- ---------- ----------- --- ---- ------------------ ---- ----- --- -
这个 CSS 代码将创建一个名为 interactive 的交互进度条，并设置它的高度为 5px。进度条由 .bar 元素和一个值元素组成。当用户上传文件时，我们可以通过 JavaScript 来更新相应的进度，该值将反映在 .bar 元素上。
总结
在本文中，我们探讨了 Material Design 风格的进度条实现技巧及其相关 CSS 代码。在实际开发中，我们可以通过修改这些 CSS 代码，来创建自己的进度条及组件。我相信这篇文章对于想要学习如何创建不同类型进度条的初学者会非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483dc4348841e9894317450