HTML/CSS 中的进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/588083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Progress bar in HTML/CSS
提问by T.T.T.
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:
HTML：
<dd>
<div class="blue" style="width:35%;">
</dd>
This creates a white bar and fills it with blue 35%.
这将创建一个白色条并用蓝色 35% 填充它。
Now I would like to fill the SAME progress bar with two different values. For example, if value A was 30% and value B was 40%, 70% of the bar would be filled, but the percentage of each could be seen by a difference in colors. Value A and B can come in any order on the bar, as long as I can tell there are two different things and "see" how much each one is taking up.
现在我想用两个不同的值填充 SAME 进度条。例如，如果值 A 为 30%，值 B 为 40%，则条形的 70% 将被填充，但可以通过颜色差异看到每个的百分比。值 A 和 B 可以在条形图上以任何顺序出现，只要我能分辨出有两种不同的东西并“查看”每个东西占用了多少。
Any suggestions?
有什么建议？
Thanks.
谢谢。
回答by jennyfofenny
Are you looking for something like this?
你在寻找这样的东西吗？
CSS:
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:
HTML：
<div class="dd">
<div class="blue" style="width:35%;"></div>
<div class="red" style="width:10%;"></div>
</div>
I'm not sure why you're using the dd tag (for me, this tag causes the divs to render beneath the dd tag, rather than inside).
我不确定你为什么使用 dd 标签（对我来说，这个标签会导致 div 在 dd 标签下呈现，而不是在里面）。
回答by Trevor Bramble
I suggest layering another bar over it and shifting it left/right as needed.
我建议在它上面再放一个横条，并根据需要向左/向右移动。
If the bars aren't supposed to stretch the length of the viewport, you could put them in a div with overflow:hidden to keep the illusion intact.
如果条形图不应该拉伸视口的长度，您可以将它们放在一个带有 overflow:hidden 的 div 中以保持错觉完整。
Edit:
编辑：
I just figured out why I wanted to do it that way and not follow what you'd started. When I did something similar before, it was using images, where changing the width of course have mangled the overlaying image.
我只是想出了为什么我想这样做而不是按照你开始的方式去做。当我之前做类似的事情时，它使用的是图像，当然改变宽度会破坏覆盖的图像。
With just plain colors, I'm sure you could get away with just using the size. But I'd still use CSS to layer one over the other.
仅使用纯色，我相信您只需使用尺寸即可。但我仍然会使用 CSS 将一个层叠在另一个之上。
回答by Cannicide
<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>
Then the CSS:
然后是 CSS：
.progressbar {
background-color: #1e1e1e;
color: white;
height: 25px;
width: 115px;
}
.inner1, .inner2 {
height: 100%;
/* Change width with javascript */
}
If you just want one value in a progress bar, there is a tutorial here.
如果你只是想在进度条中的一个值，有一个教程在这里。
回答by Dalibor
<div style="height: 5px; background-color: green; width: 100%;">
<div id="progress_bar" style="height: 5px; background-color: red; width: 10%;"></div>
</div>
And after that:
在那之后：
$('#progress_bar').css('width', '30%');
