Progress bar fill animation on page load.

[Anonymous]

I’m looking to make the progress bars fill up to the percentage their up to when the page loads. But i’m also looking to have them already filled in case javascript is disabled. http://reallycoolstuff.net/PROJECTS/jobmagnet/

[Senff]

You could use something like this:

http://codepen.io/senff/pen/rwCIG

For a non-JS version, I would recommend using JS detection and set a class to the body based on that. By default, give the body a class “no-js”. Then give the progress bars a style only when that class is active, something like:

.no-js .skill_one {width:80%;}
.no-js .skill_two {width:50%;}
.no-js .skill_three {width:66%;}

For those who DO have JS, make sure JS removes the class “no-js” so the CSS won’t be applied but the widths will be assigned using the Javascript/jQuery.

(Read more about this whole non-js thing, courtesy of Paul Irish, here).

[Anonymous]

Huh. I actually found a way of doing it without using non-js thing. I used jquery to set the bars to 0px width because css gives it it’s actual width. then animate it to its given width. If js is disabled jquery wouldn’t reset the width to 0px in the first place.

[Senff]

Well, you’re welcome.

As for your non-js solution: that works, but then you may get a bit of FUOC and you’d see the bars with their full width for a split second, before JS kicks in.

[Anonymous]

@Senff Thank you. But about that split second width you mentioned are you referring to my solution or the non-js solution?

[Senff]

FOUC can happen when you style it with CSS first, and then (once JS kicks in) unstyle it again by resetting it through jQuery.

[Author]

Posts