CSS3 Skill Bar Animation

October 7, 2011

Hello guys, i was recently thinking about a redesign of my website and i got the idea to make this pretty simple tutorial where we will build the skill animation bar for your about page.

I remember this animations are only visible in Firefox, Safari and Chrome.

Let’s see how to create it.

HTML

As you can see just create a simple markup taking into account some things.

We create an unordered list and we put our skills,add the span tag and assign the class expand, create an em tag and insert the description of our skills.

As you see below to each class is assigned a different class “html5, css3, jquery, photoshop, dreamweaver” that will be animated based on the width set in the CSS!

<div class="content">
<div class="col">
  <h2>My Skill</h2>
    <ul id="skill">
    <li><span class="expand html5"></span><em>HTML 5</em></li>
    <li><span class="expand css3"></span><em>CSS 3</em></li>
    <li><span class="expand jquery"></span><em>jQuery</em></li>
    <li><span class="expand photoshop"></span><em>Photoshop</em></li>
    <li><span class="expand dreamweaver"></span><em>Dreamweaver</em></li>
    </ul>
</div>
</div>

CSS

Now we see the focal point of the tutorial, let’s play our style of unordered list, and the “expand” class will the bar will be filled according to the width set as a percentage.

The div content is lower than the 2px div col so that it can the expand class to contain inside the li tags.

.content {
    width: 278px;
    margin: 0;
    position: relative;
    float: left;
    font-size: 12px;
    line-height: 2em;
    padding: 30px 0 30px;
}

.col {
    width: 280px;
}

#skill {
    list-style: none;
    padding-top: 30px;
}

#skill li {
    margin-bottom: 70px;
    background: #000;
    height: 5px;
    border-radius: 3px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

#skill li em {
    position: relative;
    top: -30px;
}

.expand {
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
}

.html5 {
    width: 70%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
}

.css3 {
    width: 90%;
    -moz-animation: css3 2s ease-out;
    -webkit-animation: css3 2s ease-out;
}

.jquery {
    width: 50%;
    -moz-animation: jquery 2s ease-out;
    -webkit-animation: jquery 2s ease-out;
}

.photoshop {
    width: 10%;
    -moz-animation: photoshop 2s ease-out;
    -webkit-animation: photoshop 2s ease-out;
}

.dreamweaver {
    width: 100%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
}

@-moz-keyframes html5 {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    };
}

@-moz-keyframes css3 {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    };
}

@-moz-keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    };
}

@-moz-keyframes photoshop {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    };
}

@-moz-keyframes dreamweaver {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

@-webkit-keyframes html5 {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    };
}

@-webkit-keyframes css3 {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    };
}

@-webkit-keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    };
}

@-webkit-keyframes photoshop {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    };
}

@-webkit-keyframes dreamweaver {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

Conclusion

I hope that with this tutorial you learned how to create simple skill bar animation using only the CSS3 properties a valid alternative to the use of jQuery.

34 Comments

  1. Excellent work. Should be useful in one of my projects.

  2. Nice effect. Simple and elegant

  3. Nice work and good practice in css3. Write more tuts!

  4. Kevin

    What about browser compatibility ?

  5. Great thanks…:)
    a very nice effect for animated design projects

  6. This animation works fine in (my) chrome, but sadly, the chrome doesn’t like the :after (and i guess the :before either) pseudo-class for animations:
    http://jsbin.com/azures/edit#html,live – only the second progress bar (which is a “proper” div method) animating in chrome:’(

  7. Nice Shearing … Hope you will share more. Thank a lot.

  8. I don’t think you have to explicitly set the 100% values of the animations, they’ll just fallback to the initial set width.

  9. Media Deziner

    Awesome Script! clean and simple, just one question… How do you delete blue glow of the status bars?

  10. Media Deziner

    Eventually figured it out on my own, It’s like I said, pretty straight forward and clean script. thanks for the support.

  11. dave

    The container which holds the skill bars and tittles seem to have a padding, Can I edit this? delete it?

  12. Mike

    Is there a way to load the animation only after you scroll enough to see that div? Basically imagine a long page with that div located on the bottom of that page. By the time you scroll to the bottom of the page, the animation will have taken place already. So is there a way to hold the animation and play it only when that div appears? Any help is appreciated! Thanks!

  13. Hi there. This is an awesome share !! Thanks Alessio ;)
    But can someone tell me how I should make it animate from right to left instead of left to right ? Any help or advice would be much appreciated. Thanks :)

  14. Nevermind, I just figured it out after some trial & error. I also wanted to modify it so I can use it on something else so I added an alternate direction function and an infinite animation :D If anyone else is interested, here’s an example : http://jsfiddle.net/mv5fE/11/

  15. dito07

    Hi .. I am new to to css3 and i was wondering How can i place the headings /titles next to the skill bar ?

  16. dito07

    Hi again .. i have figured it out .. thank you :D

  17. Dave

    Hey there, great tutorial!
    By any chance would you know why the blue lines ( Tag) extend outside of its container ( tag)?
    Here is a screenshot: https://www.dropbox.com/s/nv08zw86na55os5/Screen%20shot%202012-05-02%20at%207.12.55%20PM.png

    Thanks!

  18. Emilie

    Very nice!, thank you!

  19. Good job Alessio! I’m goin’ to use it on my personal web site ;)

  20. Eric

    Getting the same issue DAVE has with the blu bars going outside the box. using chrome however it dont do it in the demo.

  21. Carsten

    Got the same Problem as Dave…

    “Hey there, great tutorial!
    By any chance would you know why the blue lines ( Tag) extend outside of its container ( tag)?
    Here is a screenshot: https://www.dropbox.com/s/nv08zw86na55os5/Screen%20shot%202012-05-02%20at%207.12.55%20PM.png

    thanks for help

  22. dx700

    Hi there,

    Does anyone know how to activate this animation when scrolling?

    Thanks in advance

  23. Prince

    realy beautyfull i love it good job man

  24. To those of you having a the issue of the blue box going outside the box, make sure you add ……….

    ” position: relative” to #skill li

    .. should fix it.

Leave a Reply