html - 样式化进度条

Question

我一直在看this question我无法让我的进度条完全按照它应该的方式工作。

HTML:

<div id="progress_bar">
  <div id="bar_color1">
    <div class="upload_status"></div>
  </div>
  <div id="bar_color2">
    <div class="upload_status"></div>
  </div>
</div>

CSS:

#progress_bar {
  border: solid 1px #000;
  height: 20px;
  width: 300px;
  display: block;
  position: relative;
  text-align: center;
}
#bar_color1 {
  background-color: #FFFFFF;
  color: #000000;
  width: 100%;
}
#bar_color2 {
  background-color: #000000;
  color: #FFFFFF;
  width: 0px;
}
#bar_color1, #bar_color2 {
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

当我动态增加 #bar_color2 的百分比并更新 .upload_status 时，我最终得到这样的结果:

虽然我希望文本在另一个之上保持居中，所以当进度达到一半时，文本似乎会改变颜色......我尝试了各种方法，交换 div，添加另一个父级，但是我就是想不通。有什么想法吗？

Answer 1

我知道这对您的问题没有真正帮助，但使用 native HTML <progress>如果您的目标是相对现代的浏览器，那么在使用 JavaScript 与它交互时，元素将为您省去很多麻烦。

---

编辑:我之前发布的内容不起作用，但它确实有效:

http://jsfiddle.net/mYEM3/8/

只需从那里复制即可。