web前端开发
英文 | https://bytefish.medium.com/css-awesome-trick-how-to-create-a-progress-bar-that-changes-color-according-to-progress-be9652ebdd1c
翻译 | 杨小爱
进度条是网页上的常见功能，但是，你知道如何创建一个根据进度自动调整颜色的进度条吗？
效果如下：
需求为：
进度在 80% 和 100% 之间，请将背景颜色设置为绿色。
进度在 60% 到 80% 之间，则将背景颜色设置为蓝色。
进度在 40% 到 60% 之间，则将背景颜色设置为紫色。
进度在 20% 和 40% 之间，则将背景颜色设置为黄色。
进度在 0% 到 20% 之间，则将背景颜色设置为红色。
根据这个需求，我们今天一起来探讨这个内容。
01、创建进度条
首先，我们需要创建一个进度条。通过使用 <progress> 标签创建进度条。
但是在下面的例子中，我们需要使用 CSS 变量，而这个标签是不合适的。 所以我们使用常规的 div 标签和一些 CSS 样式来创建进度条。
进度条包含两个部分：
容器
进展
要创建一个容器，我们只需要创建一个 div 元素：
<div class="bar" style="--percent: 50;"></div>我们使用 CSS 变量百分比来表示进度。
然后我们可以使用伪类元素创建进度部分。
.bar {height: 20px;background-color: #f5f5f5;}.bar::before {content: '';display: flex;justify-content: end;width: calc(var(--percent) * 1%);height: 100%;background: #2486ff;white-space: nowrap;}
02、换颜色
我们如何实现颜色自动变化的效果？
一个技巧：设置多个背景层，每个背景层都有不同的颜色。 然后我们可以通过调整图层来间接调整背景颜色。
当红色图层和蓝色图层堆叠在一起时，背景为红色。 如果我们再次隐藏红色图层，背景将变为蓝色。
如果我们将 5 层级联在一起，让上层稍微短一点，我们会得到如下效果：
codepen演示效果：https://codepen.io/bytefishmedium/pen/rNdaMYg
03、组合合并
最后，我们需要把前面的代码进行合并，就可以得到一个能自动调整变换颜色的进度条了。
到这里了，我要与你分享的变色进度条的效果就结束了，感谢你的阅读。
学习更多技能
请点击下方公众号
