HTML/CSS中的进度条

Question

 dd { 
    /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
 }

 dd div.blue { 
    /*position: relative; */
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
 }

HTML:

<dd>
    <div class="blue" style="width:35%;"> 
</dd>

这将创建一个白色的进度条并用蓝色填充35%。

现在我想要用两个不同的值来填充相同的进度条。例如，如果A值为30%，B值为40%，则进度条的70%将被填充，但可以通过颜色的差异看到每个值的百分比。无论A和B的顺序如何，只要我能看出有两个不同的值，并且“看到”每个值占用了多少空间。

有什么建议吗？

谢谢。

- Tommy

Answer 1

你是在寻找这样的东西吗？

CSS：

div.dd { 
   /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: #fff; 
}

div.dd div.blue { 
    /*position: relative; */
    background: #00f; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}
div.dd div.red { 
    /*position: relative; */
    background: #f00; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}

HTML：

<div class="dd">
    <div class="blue" style="width:35%;"></div>
    <div class="red" style="width:10%;"></div>
</div>

我不确定你为什么要使用dd标签（对于我来说，这个标签会导致div在dd标签的下方渲染，而不是在里面）。

- jennyfofenny

---

是的。谢谢您。这是一种非常干净的方法。 - T.T.T.

Answer 2

我建议在其上再加一层条形图，并根据需要向左/向右移动。

如果这些条形图不应该延伸到整个视口的长度，您可以将它们放在一个带有overflow:hidden的div中，以保持幻觉完整。

编辑：

我刚刚想出为什么我想要那样做而不是按照你开始的方式进行。之前我做过类似的事情，使用的是图像，在那种情况下，改变宽度当然会破坏覆盖图像。

只使用纯色，我相信您可以仅使用大小来完成。但我仍然会使用CSS将其层叠在一起。

- Trevor Bramble

---

这些值将会每几分钟更改一次，所以当第一个数值降至5%时，仅仅右移第二个数值是行不通的，我需要让数值B“追加”。 - T.T.T.

Answer 3

<div class="progressbar">
   <div class="inner1" style="width: 30%; background-color: blue;"><b>Value A</b></div>
   <div class="inner2" style="width: 40%; background-color: red;"><b>Value B</b></div>
</div>

然后是 CSS：

.progressbar {
   background-color: #1e1e1e;
   color: white;
   height: 25px;
   width: 115px;
}
.inner1, .inner2 {
   height: 100%;
   /* Change width with javascript */
}

如果您只想在进度条中显示一个值，可以参考这里的教程。

- Cannicide

Answer 4

<div style="height: 5px; background-color: green; width: 100%;">
    <div id="progress_bar" style="height: 5px; background-color: red; width: 10%;"></div>
</div>  

之后：

$('#progress_bar').css('width', '30%');

- Dalibor