Styling a progress bar - html

Question

I've been looking at this question and I'm having trouble getting my progress bar to work exactly the way it should.
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;
}
As I dynamically increase the percent of #bar_color2 and update .upload_status, I end up with something like this:
Whereas I want the text to remain centered one on top of the other, so when the progress reaches half way the text appears to change color... I've tried various things, swapping divs around, adding another parent, but I just can't seem to figure it out. Any ideas?

Answer 1

I know that this doesn't really help your question, but using the native HTML <progress> element will save you a lot of headaches when interacting with it using JavaScript if you're targeting relatively modern browsers.
edit: The stuff I posted earlier doesn't work, but this does:
http://jsfiddle.net/mYEM3/8/
Just copy from there.

Answer 2

You can just change the color of the text that is on the progresive loading bar(not the middle one/the white one) to black and the annoying percentage should dissapear.
And about when the progress reaches half way the text is supposed to change color problem, i think you can do this as well with the change color thing.

Answer 3

Here's a rough idea that will work:
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

I Think its only possible with javascript.
Its not complete, and only a little example with changing the "color" after 50%, but the trick is to using special "layers" for that: 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>
You must change the z-index if the "white" text overlaps with the first progress-bar layer. In combination and a little more time you can create an progressbar, there change the color correctly when the bar appears to the text. I think here you must use a little helper layer there is positioned after 50%.