Question

我有这个固定的进度条，其大小为width并返回一些值，让我们说val1=30%。我想在同一个栏中添加第二个值，例如val2=70%，这样它将填充剩余的空格，但颜色不同，以便进度条显示两者。

对此进行概括，同样应该有两个以上的值，例如三个值：val1=0.3，val2=0.3和val3=0.4等。

我想通过CSS实现这一点，没有额外的Javascript，因为我已经在页面中完成了所有值，并且我正在使用模板，所以我可以迭代这些值。

.miniBarProgress {
    background-color: #8a898a;
    height: 100%;
    position: absolute;
    top: 0rem;
    left: 0rem;
}
.miniBar {
    height: 0.5rem;
    border: 1px solid #8a898a;
    position: relative;
    width: -webkit-calc(100% - 2rem);
    width: -moz-calc(100% - 2rem);
    width: calc(100% - 2rem);
    margin-right: 0.5rem;
}

<div class="miniBar"><div class="miniBarProgress" style="width: 30%;"></div></div>

[UPDATE] 感谢下面的答案，我修复了代码以使其正常工作。

.miniBarProgress {
    height: 100%;
    position: absolute;
    top: 0rem;
    left: 0rem;
}
.miniBar {
    height: 0.5rem;
    border: 1px solid #8a898a;
    position: relative;
    width: -webkit-calc(100% - 2rem);
    width: -moz-calc(100% - 2rem);
    width: calc(100% - 2rem);
    margin-right: 0.5rem;
}

<div class="miniBar">
<div class="miniBarProgress" style="left: 0; width: 30%; background-color: gray;"></div>
<div class="miniBarProgress" style="left: 30%; width: 40%; background-color: red;"></div>
<div class="miniBarProgress" style="left: 70%; width: 30%; background-color: blue;"></div>
</div>

Answer 1

每个值都需要另一个miniBarProgress。使用left属性从上一个值结束的位置开始（即left + width）。以下是3个值的示例：

.miniBarProgress1 {
  background-color: #8a898a;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 20%;
}

.miniBarProgress2 {
  background-color: #ff0;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 20%;
  width: 40%;
}

.miniBarProgress3 {
  background-color: #0ff;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 60%;
  width: 30%;
}

.miniBar {
  height: 0.5rem;
  border: 1px solid #8a898a;
  position: relative;
  width: -webkit-calc(100% - 2rem);
  width: -moz-calc(100% - 2rem);
  width: calc(100% - 2rem);
  margin-right: 0.5rem;
}

<div class="miniBar">
  <div class="miniBarProgress1"></div>
  <div class="miniBarProgress2"></div>
  <div class="miniBarProgress3"></div>
</div>

或者，您可以对所有条形使用相同的类miniBarProgress，并始终从零开始。在这种情况下，您必须反向排序（更长到更短）或使用z-index属性来执行此操作。每个栏都会隐藏其后面的部分栏杆：

.miniBarProgress {
  background-color: #8a898a;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 0rem;
}

.miniBar {
  height: 0.5rem;
  border: 1px solid #8a898a;
  position: relative;
  width: -webkit-calc(100% - 2rem);
  width: -moz-calc(100% - 2rem);
  width: calc(100% - 2rem);
  margin-right: 0.5rem;
}

<p>Reverse order:</p>
<div class="miniBar">
  <div class="miniBarProgress" style="width: 90%; background-color: #0ff;"></div>
  <div class="miniBarProgress" style="width: 60%; background-color: #ff0;"></div>
  <div class="miniBarProgress" style="width: 20%; background-color: #8a898a;"></div>
</div>
<p>Using z-index</p>
<div class="miniBar">
  <div class="miniBarProgress" style="width: 20%; z-index: 3; background-color: #8a898a;"></div>
  <div class="miniBarProgress" style="width: 60%; z-index: 2; background-color: #ff0;"></div>
  <div class="miniBarProgress" style="width: 90%; z-index: 1; background-color: #0ff;"></div>
</div>

CSS静态进度条由多个值填充

1 个答案: