使用 css 在 li 中显示进度

Question

如下所示：

目前我的Less如下所示。

    /*progressbar*/
.progressbar {
    margin-bottom: 30px;
    margin-top: 10px;
    counter-reset: step;
    clear: both;
}

.progressbar li {
    font-size: 12px;
    width: 24%;
    float: left;
    position: relative;
    text-align: center;

    &:before {
    content: counter(step);
    counter-increment: step;
    width: 25px;
    line-height: 13px;
    display: block;
    font-size: 12px;
    color: transparent;
    border: 6px solid #ececec ;
    background: #27ae60 ;
    border-radius: 19px;
    margin: 0 auto 4px;
    }

    &:after {
    content: '';
    width: 85%;
    height: 3px;
    background: #B9B9B9;
    position: absolute;
    left: -42%;
    top: 10px;
    z-index: 0;
   }

   &:first-child:after {
    content: none; 
  }
}

.progress-payment li {
    width: 50%;
}

.progressbar li.active{
    &:after, &:before {      
    background: @success-btn;
    color: @success-btn;
    }
}

HTML

<ul class="progressbar">
    <li class="active">Order Placed</li>
    <li>Shipped</li>
    <li>Completed</li>
    <li>Settled</li>
</ul>

请帮忙

Answer 1

您可以通过为生成栏的伪元素使用 linear-gradient 背景来做到这一点。渐变是对半的，已完成的颜色 为上半部分，待处理的颜色 为其余部分。

/*progressbar*/

.progressbar {
  margin-bottom: 30px;
  margin-top: 10px;
  counter-reset: step;
  clear: both;
  list-style: none;
}
.progressbar li {
  font-size: 12px;
  width: 24%;
  float: left;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 25px;
  line-height: 25px;
  display: block;
  font-size: 12px;
  color: transparent;
  border: 6px solid #ececec;
  background: #27ae60;
  border-radius: 19px;
  margin: 0 auto 4px;
}
.progressbar li:after {
  content: '';
  width: 85%;
  height: 3px;
  background: #B9B9B9;
  position: absolute;
  left: -42%;
  top: 17px;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progress-payment li {
  width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
  background: #27ae60;
  color: white;
}

.progressbar li.complete:after {
  background: #27ae60;
}
.progressbar li.half-complete:after {
  background: linear-gradient(to right, #27ae60 50%, #B9B9B9 50%);
  color: white;
}

<ul class="progressbar">
  <li class="complete">Order Placed</li>
  <li class="complete">Shipped</li>
  <li class="active">Completed</li>
  <li class="half-complete">Settled</li>
</ul>

如果你想要进度条稍微弯曲的半填充那么你可以使用radial-gradient作为背景就像下面的片段。

/*progressbar*/

.progressbar {
  margin-bottom: 30px;
  margin-top: 10px;
  counter-reset: step;
  clear: both;
  list-style: none;
}
.progressbar li {
  font-size: 12px;
  width: 24%;
  float: left;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 25px;
  line-height: 25px;
  display: block;
  font-size: 12px;
  color: transparent;
  border: 6px solid #ececec;
  background: #27ae60;
  border-radius: 19px;
  margin: 0 auto 4px;
}
.progressbar li:after {
  content: '';
  width: 85%;
  height: 3px;
  background: #B9B9B9;
  position: absolute;
  left: -42%;
  top: 17px;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progress-payment li {
  width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
  background: #27ae60;
  color: white;
}

.progressbar li.complete:after {
  background: #27ae60;
}
.progressbar li.half-complete:after {
  background: radial-gradient(50% 300% at 25% 50%, #27ae60 50%, #B9B9B9 40%);
  color: white;
}

<ul class="progressbar">
  <li class="complete">Order Placed</li>
  <li class="complete">Shipped</li>
  <li class="active">Completed</li>
  <li class="half-complete">Settled</li>
</ul>

注意：两种解决方案都假定您的target browsers are those that support gradients (IE10+).

Answer 2

另一种方法是为此使用 animation。

因为您已经在列表项中使用了两个伪元素。我们将在 ul 元素中使用伪元素来提供空的进度线。

我们将保留您的其他 classes 仅用于演示目的，但您可以进一步优化此方法。原则必须改变以考虑从步骤 1 到 4 从 0 到 100% 的整个过程，而不是 1 到 2、2 到 3 等

我们开始：

首先，我们在 ul 元素中创建伪元素，仅用于灰色回退。

.progressbar::after {
  content: '';
  width: 68%;
  height: 3px;
  background: #B9B9B9;
  position: absolute;
  left: 17%;
  top: 17px;
  z-index: -2;
}

然后我们在主轴上将列表项的::after伪元素缩小为0。 （如果您提供较旧的浏览器支持，请使用 :）。

这里我们将您的 class 保留为选择器，就像我之前说过的，您可以做得更好，但需要更改一些逻辑。

这里我们还声明了一个我们将在下一步创建的动画。 它会做什么？ 它只会 scale 返回 1 我们的伪元素。

.progressbar li.half-complete:after {
  transform: scaleX(0);
  color: white;
  animation: fill 100ms linear forwards;
  background-color: #27ae60;
}

我们定义关键帧：

@keyframes fill {
  to {
    transform: scaleX(1);
  }
}

到目前为止我们得到了这个：

/*progressbar*/

.progressbar {
  margin-bottom: 30px;
  margin-top: 10px;
  counter-reset: step;
  clear: both;
  list-style: none;
  position: relative;
}
.progressbar li {
  font-size: 12px;
  width: 24%;
  float: left;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 25px;
  line-height: 25px;
  display: block;
  font-size: 12px;
  color: transparent;
  border: 6px solid #ececec;
  background: #27ae60;
  border-radius: 19px;
  margin: 0 auto 4px;
}
.progressbar li:after {
  content: '';
  width: 85%;
  height: 3px;
  position: absolute;
  left: -42%;
  top: 17px;
  z-index: -1;
}
.progressbar::after {
  content: '';
  width: 68%;
  height: 3px;
  background: #B9B9B9;
  position: absolute;
  left: 17%;
  top: 17px;
  z-index: -2;
}
.progressbar li:first-child:after {
  content: none;
}
.progress-payment li {
  width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
  background: #27ae60;
  color: white;
}
.progressbar li.half-complete:before {
  color: white;
}
.progressbar li.complete:after {
  background: #27ae60;
}
.progressbar li.half-complete:after {
  transform: scaleX(0);
  color: white;
  animation: fill 3s linear forwards;
  background-color: #27ae60;
}
@keyframes fill {
  to {
    transform: scaleX(1);
  }
}

<ul class="progressbar">
  <li class="complete">Order Placed</li>
  <li class="complete">Shipped</li>
  <li class="active">Completed</li>
  <li class="half-complete">Settled</li>
</ul>

我们还没有完成，我们得到了动画，但它从中心开始，我们想要一个特定的帧，当条形图为 50% 时。

由于浏览器在创建动画时会创建多个帧，因此您可以使用属性 animation-delay 获得您想要的帧，通常您会使用正值，但是当您使用负一，动画从那个点开始。

让动画从左侧 transform-origin: left 开始，一直到右侧结束，但不使用 animation-delay：

/*progressbar*/

.progressbar {
  margin-bottom: 30px;
  margin-top: 10px;
  counter-reset: step;
  clear: both;
  list-style: none;
  position: relative;
}
.progressbar li {
  font-size: 12px;
  width: 24%;
  float: left;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 25px;
  line-height: 25px;
  display: block;
  font-size: 12px;
  color: transparent;
  border: 6px solid #ececec;
  background: #27ae60;
  border-radius: 19px;
  margin: 0 auto 4px;
}
.progressbar li:after {
  content: '';
  width: 85%;
  height: 3px;
  position: absolute;
  left: -42%;
  top: 17px;
  z-index: -1;
}
.progressbar::after {
  content: '';
  width: 68%;
  height: 3px;
  background: #B9B9B9;
  position: absolute;
  left: 17%;
  top: 17px;
  z-index: -2;
}
.progressbar li:first-child:after {
  content: none;
}
.progress-payment li {
  width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
  background: #27ae60;
  color: white;
}
.progressbar li.half-complete:before {
  color: white;
}
.progressbar li.complete:after {
  background: #27ae60;
}
.progressbar li.half-complete:after {
  transform: scaleX(0);
  color: white;
  animation: fill 3s linear forwards;
  transform-origin: left;
  background-color: #27ae60;
}
@keyframes fill {
  to {
    transform: scaleX(1);
  }
}

<ul class="progressbar">
  <li class="complete">Order Placed</li>
  <li class="complete">Shipped</li>
  <li class="active">Completed</li>
  <li class="half-complete">Settled</li>
</ul>

现在使用负值的 animation-delay:

/*progressbar*/

.progressbar {
  margin-bottom: 30px;
  margin-top: 10px;
  counter-reset: step;
  clear: both;
  list-style: none;
  position: relative;
}
.progressbar li {
  font-size: 12px;
  width: 24%;
  float: left;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 25px;
  line-height: 25px;
  display: block;
  font-size: 12px;
  color: transparent;
  border: 6px solid #ececec;
  background: #27ae60;
  border-radius: 19px;
  margin: 0 auto 4px;
}
.progressbar li:after {
  content: '';
  width: 85%;
  height: 3px;
  position: absolute;
  left: -42%;
  top: 17px;
  z-index: -1;
}
.progressbar::after {
  content: '';
  width: 68%;
  height: 3px;
  background: #B9B9B9;
  position: absolute;
  left: 17%;
  top: 17px;
  z-index: -2;
}
.progressbar li:first-child:after {
  content: none;
}
.progress-payment li {
  width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
  background: #27ae60;
  color: white;
}
.progressbar li.half-complete:before {
  color: white;
}
.progressbar li.complete:after {
  background: #27ae60;
}
.progressbar li.half-complete:after {
  transform: scaleX(0);
  color: white;
  animation: fill 3s linear forwards;
  transform-origin: left;
  animation-delay: -1.5s;
  background-color: #27ae60;
}
@keyframes fill {
  to {
    transform: scaleX(1);
  }
}

<ul class="progressbar">
  <li class="complete">Order Placed</li>
  <li class="complete">Shipped</li>
  <li class="active">Completed</li>
  <li class="half-complete">Settled</li>
</ul>

由于演示中动画的总持续时间是 3s，您只需将其一半用作负值即可获得 50%，看看动画如何从那里开始。

然后我们就用animation-play-state: paused;来防止转换。

/*progressbar*/

.progressbar {
  margin-bottom: 30px;
  margin-top: 10px;
  counter-reset: step;
  clear: both;
  list-style: none;
  position: relative;
}
.progressbar li {
  font-size: 12px;
  width: 24%;
  float: left;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 25px;
  line-height: 25px;
  display: block;
  font-size: 12px;
  color: transparent;
  border: 6px solid #ececec;
  background: #27ae60;
  border-radius: 19px;
  margin: 0 auto 4px;
}
.progressbar li:after {
  content: '';
  width: 85%;
  height: 3px;
  position: absolute;
  left: -42%;
  top: 17px;
  z-index: -1;
}
.progressbar::after {
  content: '';
  width: 68%;
  height: 3px;
  background: #B9B9B9;
  position: absolute;
  left: 17%;
  top: 17px;
  z-index: -2;
}
.progressbar li:first-child:after {
  content: none;
}
.progress-payment li {
  width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
  background: #27ae60;
  color: white;
}
.progressbar li.half-complete:before {
  color: white;
}
.progressbar li.complete:after {
  background: #27ae60;
}
.progressbar li.half-complete:after {
  transform: scaleX(0);
  color: white;
  animation: fill 3s linear forwards;
  transform-origin: left;
  animation-delay: -1.5s;
  animation-play-state: paused;
  background-color: #27ae60;
}
@keyframes fill {
  to {
    transform: scaleX(1);
  }
}

<ul class="progressbar">
  <li class="complete">Order Placed</li>
  <li class="complete">Shipped</li>
  <li class="active">Completed</li>
  <li class="half-complete">Settled</li>
</ul>

然后我们可以稍微清理一下，在这个演示中我们使用一些 javascript 来看看如何操作它：

.progressbar li.half-complete:after {
  transform: scaleX(0);
  color: white;
  animation: fill 100ms linear forwards; /* Use an easier value to represent percentages in a progress bar*/
  transform-origin: left;
  animation-delay: inherit; /* We inherit the animation-delay from the `li` element, which we can easily manipulate with javascript*/
  animation-play-state: paused;
  background-color: #27ae60;
}

最终结果：

var progress = document.getElementById("progress");

var progressBarLastItem = document.querySelector(".progressbar li:last-child");

progress.addEventListener("change", function() {
  progressBarLastItem.style.animationDelay = "-" + this.value + "ms";
});

/*progressbar*/

.progressbar {
  margin-bottom: 30px;
  margin-top: 10px;
  counter-reset: step;
  clear: both;
  list-style: none;
  position: relative;
}
.progressbar li {
  font-size: 12px;
  width: 24%;
  float: left;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 25px;
  line-height: 25px;
  display: block;
  font-size: 12px;
  color: transparent;
  border: 6px solid #ececec;
  background: #27ae60;
  border-radius: 19px;
  margin: 0 auto 4px;
}
.progressbar li:after {
  content: '';
  width: 85%;
  height: 3px;
  position: absolute;
  left: -42%;
  top: 17px;
  z-index: -1;
}
.progressbar::after {
  content: '';
  width: 68%;
  height: 3px;
  background: #B9B9B9;
  position: absolute;
  left: 17%;
  top: 17px;
  z-index: -2;
}
.progressbar li:first-child:after {
  content: none;
}
.progress-payment li {
  width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
  background: #27ae60;
  color: white;
}
.progressbar li.half-complete:before {
  color: white;
}
.progressbar li.complete:after {
  background: #27ae60;
}
.progressbar li.half-complete:after {
  transform: scaleX(0);
  color: white;
  animation: fill 100ms linear forwards;
  transform-origin: left;
  animation-delay: inherit;
  animation-play-state: paused;
  background-color: #27ae60;
}
@keyframes fill {
  to {
    transform: scaleX(1);
  }
}

<ul class="progressbar">
  <li class="complete">Order Placed</li>
  <li class="complete">Shipped</li>
  <li class="active">Completed</li>
  <li class="half-complete">Settled</li>
</ul>

<input id="progress" type="range" min="0" max="100">

使用 css 在 li 中显示进度

Show progress half way in li using css

html

css

less

linear-gradients

radial-gradients

最终结果：