设置进度条的样式

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

我知道这并不能真正帮助您解决问题，但如果您使用JavaScript进行交互，那么使用原生HTML <progress>元素可以为您节省很多麻烦浏览器。

---

编辑：我之前发布的内容不起作用，但确实如此：

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

从那里复制。

Answer 2

您只需将进度加载栏（不是中间加载栏/白色加载栏）上的文本颜色更改为黑色，烦人的百分比就会消失。 关于当进度达到一半时，文本应该改变颜色问题，我认为你也可以用改变颜色的东西做到这一点。

Answer 3

这是一个粗略的想法：

HTML：

<div id="progress_bar">
  <div id="bar_color1">
      <div class="progress_text1">50%</div>
  </div>
  <div id="bar_color2">
      <div class="progress_text2">50%</div>
  </div>
</div>

CSS：

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

.progress_text1{
    position: absolute;
    left:100px;
    width:100px;
    text-align:center;
}
.progress_text2{
    position: absolute;
    right:100px;
    width:100px;
    text-align:center;
}

Answer 4

我认为它只能用javascript。

不完整，只是改变＆＃34;颜色＆＃34;的一个小例子。 50％之后，但诀窍是使用特殊的＆＃34;层＆＃34;为此：http://jsfiddle.net/J92Bv/

<div id="progress_bar">
    <div class="progress_left" style="width: 50%;"></div>
    <div class="progress_right" style="width: 50%;"></div>
    <div class="text_1">50%</div>
    <div class="text_2">50%</div>
</div>

如果＆＃34; white＆＃34;您必须更改z-index文本与第一个进度条图层重叠。通过组合和更多时间可以创建进度条，当条形显示在文本上时，可以正确地更改颜色。我想在这里你必须使用一个小帮手层，它位于50％之后。