Grow your CSS skills. Land your dream job.

Progress bar fill animation on page load.

  • # July 7, 2013 at 3:33 pm

    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/

    # July 7, 2013 at 3:59 pm

    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).

    # July 7, 2013 at 4:30 pm

    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.

    # July 7, 2013 at 4:39 pm

    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.

    # July 7, 2013 at 4:46 pm

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

    # July 7, 2013 at 4:56 pm

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".