Styling a progress bar

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:

enter image description here

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?

Tarun · Accepted Answer · 2014-04-30T19:25:04.157

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.

edited Apr 30 '14 at 19:25

answered Apr 30 '14 at 18:58

Tarun

456
3
8

@mistermartin Just added an example which I think should work. – Tarun Apr 30 '14 at 19:07
2

@mistermartin Here is a jsfiddle. See if it works and you can copy the code from there. http://jsfiddle.net/mYEM3/8/ – Tarun Apr 30 '14 at 19:24
@mistermartin You can then update `.upload_status` and the width of `#completed` from javascript dynamically. – Tarun Apr 30 '14 at 19:26
1

Thank you! It's working. Now I just need to study the code and learn why :) – mister martin Apr 30 '14 at 19:35

score 0 · Answer 2 · answered Apr 30 '14 at 19:07

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.

score 0 · Answer 3 · answered Apr 30 '14 at 19:15

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;
}

score 0 · Answer 4 · answered Apr 30 '14 at 19:24

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%.

Styling a progress bar

4 Answers4