JQ Animated Progress Bar

Question

I need to create an animated progress bar on page load, here is an example as to what I require: http://somnia-themes.com/templates/verendus/shortcodes/progressbar.html

I need the same amount of bars to show as in the example above, but they need to animate with a striped image, I can use CSS, but I need to ensure it works in all browsers hence the use of a sliced striped image.

Would be grateful for any assistance.

Alternatively, there is an animated progress bar in Twitter Bootstrap I can use (My site is built with Bootstrap framework) but the bar does not load same as the url above. Is there a way to add this loading feature to Bootstrap?

Thanks in advance. Sanj

Answer 1

JS Fiddle Striped Progress Example

This is using the .progress-striped class on the progress bar.

<div class="progress progress-striped"> 
<div class="bar" style="float: left; width: 0%; " data-percentage="50"></div>
</div>