CSS-只有渐变颜色的ProgressBar，突出当前状态。
提问于 2018-12-28 02:10:20
我在寻找只有CSS的ProgressBar，它用渐变和动画来显示这样的活动。
我研究了<progress>标记，但它是造型非常有限，所以我寻找其他解决方案，但我只能找到静态示例，或者是具有最低高级状态的梯度在极限范围内收缩，或者在其他情况下是带有许多嵌套DIV的复杂标记。
所需的是：
- CSS专用解决方案
- 梯度背景
- 如果进度条小于其完成率的100%，则不应折叠渐变。
- 动画状态
- 最小标记
如果它也具有不可终止的状态，可能会很有趣。
回答 2
Stack Overflow用户
发布于 2018-12-28 03:10:12
您可以使用一个元素并简化代码，如下所示：
.progressbar {
height: 15px;
border-radius: 1em;
margin:5px;
background:
linear-gradient(-45deg,
rgba(255, 255, 255, 0.15) 25%,transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,transparent 75%)
left/30px 30px repeat-x,
linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
lightgray;
box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
}
@keyframes change {
from {background-position:0 0,left}
to {background-position:30px 0,left}
}<div class="progressbar" style="width:80%;"></div>
<div class="progressbar" style="width:20%;"></div>
<div class="progressbar" style="width:90%;"></div>
<div class="progressbar" style="--p:0"></div>
<div class="progressbar" style="--p:0;width:60%;"></div>
<div class="progressbar" style="--p:0;width:30%;"></div>
Stack Overflow用户
发布于 2018-12-28 02:10:20
我没有找到任何符合所有要求的现有解决方案，所以我开发了一个可能解决办法。
标记很简单(用于状态)：
<div class="progressbar"></div>或者(对于具体进展情况)
<div class="progressbar" style="width:75%"></div>其思想是，在处理过程中通过JS通过一个简单的指令(在jQuery中)来设置高级状态：
$('.progressbar').width('75%')CSS
对于CSS部分来说，除了colored属性之外，有趣的是在:before和:after伪元素上使用生成的内容来避免额外的标记，分别包含彩色渐变和重叠斑马动画条。
为了允许渐变显示增加ProgressBar宽度，原始容器具有overflow:hidden属性。
最后，为了具有不确定的状态，在样式属性为空或缺失的情况下，强制使用背景色。
.progressbar:not([style]):before,
.progressbar[style='']:before{
background: lightgray;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53956798
复制
腾讯云开发者
