HTML/CSS 中的进度条答案

【问题标题】：Progress bar in HTML/CSSHTML/CSS 中的进度条
【发布时间】：2009-02-25 21:55:15
【问题描述】：

 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 可以在条形图上以任何顺序出现，只要我能分辨出有两种不同的事物并“查看”每个事物占用了多少。

有什么建议吗？

谢谢。

【问题讨论】：

标签： html css progress-bar

【解决方案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 标签下面，而不是在里面）。

【讨论】：

是的。谢谢你。这是一种非常干净的方法。

【解决方案2】：

我建议在其上放置另一个条并根据需要向左/向右移动。

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

编辑：

我只是想通了为什么我想这样做，而不是按照你的开始。当我之前做过类似的事情时，它使用的是图像，改变宽度当然会破坏覆盖的图像。

如果只使用纯色，我相信您可以只使用尺码。但我仍然会使用 CSS 一层层叠加。

【讨论】：

例子？这些值每隔几分钟就会改变一次，所以当说第一个值下降到 5% 时，将第二个值向右移动将不起作用，我需要值 B 来“追加”。

【解决方案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 */
}

如果你只想要一个进度条中的值，有一个教程here。

【讨论】：

【解决方案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%');

【讨论】：