jquery - 带有自定义背景多色 css/jquery 的进度条

Question

我的目标是实现一个带有自定义背景的进度条。最后的结果应该是这样看的:

背景是(按顺序)绿色、黄色和红色。背景上的淡蓝色……进度线。

有没有制作这个的教程？我已经意识到一些进度条，但没有我想要的自定义背景。谢谢。

Answer 1

只需使用线性渐变，您就可以指定任意数量的颜色并轻松控制每种颜色的百分比:

.progress {
 height:52px;
 width:500px;
 border:2px solid #000;
 text-align:center;
 color:#fff;
 font-size:20px;
 background:linear-gradient(to right, red 20%, blue 20%, blue 50%,yellow 50%,yellow 60% ,green 0);
}

<div class="progress"> 50 %</div>

您还可以考虑多个渐变，您可以使用 jQuery 通过调整 background-size 轻松管理它们:

.progress {
 height:52px;
 width:500px;
 border:2px solid #000;
 text-align:center;
 color:#fff;
 font-size:20px;
 background-image:
   linear-gradient(red,red),
   linear-gradient(blue,blue),
   linear-gradient(green,green),
   linear-gradient(yellow,yellow);
 background-size:
   4% 100%,
   50% 100%,
   60% 100%,
   100% 100%;
 background-repeat:no-repeat;
 transition:1s;
}
.progress:hover {
 background-size:
   20% 100%,
   30% 100%,
   90% 100%,
   100% 100%;
}

Hover to see the animation !
<div class="progress"> 50 %</div>