Question

我正在寻找仅CSS的 ProgressBar ，该梯度使用动画和渐变来很好地显示此类活动。

我调查了<progress>标记，但它是very limited in styling，因此我寻找了其他解决方案，但是我只能找到静态示例，或者其中gradients are contracted within limits的优先级最低，或者另一种情况是带有许多嵌套DIV的复杂标记。

Desiderata应该是：

仅CSS解决方案
渐变背景
如果进度栏小于其完成次数的100％，则不应折叠渐变
动画状态
最小标记

如果它也可以具有 terminateminate 状态，可能会很有趣。

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

Answer 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部分，除了Cosmetich属性外，有趣的是在:before和:after伪元素上使用生成的内容来避免额外的标记，分别包含彩色渐变和重叠的斑马动画条

为使渐变逐渐显示，以提高ProgressBar的速度，原始容器具有overflow:hidden属性。

最后，要具有不确定状态，如果样式属性为空或缺失，则将强制使用背景色。

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

仅CSS的ProgressBar，其渐变颜色突出显示当前状态

2 个答案: