仅 CSS 的 ProgressBar，带有突出显示当前状态的渐变颜色答案

【问题标题】：CSS-only ProgressBar with gradient color that highlights current status仅 CSS 的 ProgressBar，带有突出显示当前状态的渐变颜色
【发布时间】：2018-12-28 10:10:20
【问题描述】：

我一直在寻找纯 CSS ProgressBar，它使用渐变和动画以漂亮的外观显示此类活动。

我调查了<progress> 标签，但它是very limited in styling，所以我寻找了其他解决方案，但我只能找到静态示例，或者其中gradients are contracted within limits 的高级状态最低，或者在其他情况下是一个复杂的标记许多嵌套的DIV。

需要的应该是：

纯 CSS 解决方案
渐变背景
如果进度条少于完成度的 100%，则不应折叠渐变
动画状态
最少的标记

如果它也可以具有 inderterminate 状态会很有趣。

【问题讨论】：

标签： css progress-bar

【解决方案1】：

您可以使用一个元素并简化您的代码，如下所示：

.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>

【讨论】：

我知道，但结果不一样。在我的版本中，终点是圆形的，动画斑马以彩色条结束，其余部分没有背景。不管怎样，这对某人来说肯定是一个有趣的解决方案。谢谢你的建议
@LucaDetomi 在这种情况下更容易 ;) 检查更新...我保留了 CSS 变量，但您可以删除它
非常接近，但您错过了我描述的“不确定”状态 :-) 无论如何，干得好

【解决方案2】：

我没有找到任何与所有需求相对应的现有解决方案，因此我开发了一个possible solution。

HTML

标记很简单（对于indeterminate status）：

<div class="progressbar"></div>

或（对于specific advancement status）

<div class="progressbar" style="width:75%"></div>

这个想法是在进程中通过 JS 设置进度状态，使用简单的指令，例如（在 jQuery 中）：

$('.progressbar').width('75%')

CSS

对于 CSS 部分，除了修饰属性之外，有趣的是在 :before 和 :after 伪元素上使用生成的内容来避免额外的标记，分别包含彩色渐变和重叠斑马动画条。

为了让渐变逐渐显示增加 ProgressBar 宽度，原始容器具有overflow:hidden 属性。

最后，为了具有 indeterminate 状态，在 style 属性为空或缺失的情况下强制使用 background-color。

.progressbar:not([style]):before,
.progressbar[style='']:before{
   background: lightgray;
}

【讨论】：

请随时提出对此解决方案的其他改进建议