Extend Line with CSS

I have making an AJAX wizard using JQuery and I'm trying to get the top navigation indicators to work properly. So far I have this:

I'm trying to extend the line when the user pushes "Next Step".

What I would really like is to have it animate to the next step. My initial approach is to have the light gray line just a "border" property of the "ol" property, and then have a normal "img" tag right after the ol and set these CSS properties on the image (which is an image of a small orange line):

{
position:absolute;
margin-top:-37px;
margin-left:-3px;
height:13px;
width:400px;
}

So I have a "Proceed" function which fades out the current step and fades in the next step. This is all working great. I was thinking I could increase the width of this orange line (using "animate" but the problem is it goes over the Step indicater (the little "o") like this:

Is there a better way of doing something like this?

I know it's nit picky little issue, but any advice would really help!

Thank you

UPDATE: By the way, I forgot to add that I have many of these wizards with any different number of steps, so if I did it the way I'm trying to do it, I would need to find the length of width between eac开发者_StackOverflow社区h step, which would be a lot of work. But if it's the only way, then I can do this

See this fiddle where next extends the orange bar: http://jsfiddle.net/maniator/AS63L/

What you need to do is than on each next you remove the appropriate bubble.

Here is an updated fiddle that does it step by step: http://jsfiddle.net/maniator/AS63L/5/

Without seeing your markup I would create the line and then absolutely position the circles so the line is under them, then you can extend the line and use the left position of the points to dynamically set the width.

If it were me, I would create an image of each entire step (including the lines and circles) and then use a plugin like http://jquery.malsup.com/cycle/wipe.html (see the l2r transition) to simulate the line animation between steps. This avoids positioning and the issues you're running in to.

I did it with some inline elements: jsFiddle

EDIT

It was been updated. Take a look here jsfiddle

.meter {background:#eee;height:4px;width:200px;position:relative;margin-top:4px}
.ball,
.bar {position:absolute;background:#f00;}
.ball {border-radius:10px;width:10px;height:10px;margin-top:-3px;left:40px;transition: left .4s}
.bar {height:4px;left:0;width:40px;transition: width .4s}

<div class="meter">
    <div class="ball"></div>
    <div class="bar"></div>
</div>

Adjust .bar width and .ball left together via javascript.

Also you could use HTML5 , but that's a pain to style.