Indeterminate progress bar in HTML+CSS

Question

I would like to create an indeterminate HTML+CSS progress bar so it looks like the one on Vista:

_{(source: microsoft.com)}

I would like to:

1. horizontally adjust it to progress bar width (minimum and maximum width may be defined)
2. don't use Javascript but rather just animated GIF
3. having only one moving indicator on the whole width

Any suggestions how to do this?

Answer 1

NO, NO, NO! It is possible

Using CSS overflow: hidden and keyframe, it can be possible.

For the keyframe, I used from left:-120px(width of the glowing object) to left:100%

The structure I used:

<div class="loader">
<div class="loader-bg left"></div>
<div class="loader-bg right"></div>
<div class="greenlight"></div>
<div class="gloss"></div>
<div class="glow"></div>
</div>

The updated, compact structure using :before and :after:

<div class="loader7">
    <span></span>
    <div class="greenlight"></div>
</div>

The gradient, masking, glowing and all the effects cost an expensive structure. If anyone has a better idea, please let me know.

At this date, webkit only solution(the ellipse mask for the glow):

Added SVG mask for Firefox and other browsers that do not support -webkit-mask-image: http://jsfiddle.net/danvim/8M24k/

Answer 2

GIF-only solution

Vista's indeterminate progress bar doesn't loop right after it goes off on the right... So I could create a wide enough GIF image and when progress bar would be narrow it would take longer for it to loop and when it'd be wider it loops again sonner. :)

Time of each repeat is the same in both cases but in narrow bar it takes less to get to the end than on the wider ones.

Answer 3

1. css - width:100%
2. no Javascript means you will have to do it with html5 which is a bit trickier. An animated GIF would work only if you decide to make the bar fixed-width (otherwise the gif will be skewed)
3. to move it: javascript or html5

The easiest way: javascript (like it or not... ;) )