html/css: loading bar (with buffer)

Question

Can you guys help me in tweaking out my loading bar css and/or html. I've got two problems existing right now with my current loading bar.

One is that there is some excess shadow going out of the bar in the left and right outside the border (which makes it look like the border-radius is pixelated when zoomed properly). I know it's the box-shadow's problem cause it's not there when I remove the box shadow property for both #progress and #buffer.

And another is quite minor but is really bugging me. When the progress/buffer bar is just starting to load (change style="width:0.4%"), the form of the div with radius goes outside the container:

I know I can overflow:hidden it (which I already do in the #loading_bar_container), but I think position:absolute doesn't want to get hidden (which I need absolute cause I need the two bars to be in one position, overlapping each other). When I remove though the #buffer (so there's only one bar), and remove loading_bar's position:relative and #progress 's position:absolute, I get the scenario I want which is:

I'll add here a jsfiddle fragment of the code so we can play with it.

Cheers!

PS: I think tag should be loading-bar but I can't create a new tag so I add it as progress-bar.

Edit: I've done this test in Chrome and @Oriol mentioned it works well in FF. I've checked and FF does display it the way I wanted it to. I've checked with Safari and it displays the same was as Chrome. So this question is for Chrome and Safari so far. Haven't checked it with IE (scared).

Answer 1

It seems it's a Chrome's bug caused by position:relative.

Compare http://jsfiddle.net/VeJNt/2/ with http://jsfiddle.net/VeJNt/3/

Then you can use

#progress {
    margin-top:-8px;
}​

instead of those position:relative and position:absolute.

See it here: http://jsfiddle.net/VeJNt/4/

But why do you have both loading_bar_container and loading_bar?

I think you should simplify your code: http://jsfiddle.net/VeJNt/5/

Edit:

If you want a more general code, which doesn't depend on the number of bars, you can use

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}

And then you only have to set the background and box-shadow to each bar.

See it here: http://jsfiddle.net/VeJNt/6/

It isn't cumulative (-8px to the second bar, -16px to the third one, ...) because when you set a margin it isn't like if you are setting position:relative and setting top to -8px, -16px...

If you set margin-top:10px to an element, it goes 10px down, but doesn't overlap the next element (all the following elements go 10px down too).

Then, if you set margin-top:-8px to the second bar, it goes 8px up, but it doesn't appear any space between it and the next bar (all the following bars go 8px up too). Then, you don't have to set margin-top:-16px to the third bar, you only need -8px, because it has gone up 8px already because of the second bar.