Animated Skill Bar and Progress Bar with jQuery & CSS3

30 Responses

  1. Robert says:

    Simple code & very useful to me..

    Thanks for sharing this tutorial.. you are awesome man ๐Ÿ™‚

  2. Ingwer says:

    thank you for sharing! just a few lines of code and everything’s done ๐Ÿ™‚
    i was trying to combine the animation with the jquery easing plugin, but i didn’t get it to work – do you think you could help?

  3. Arwin says:

    Awesome ๐Ÿ™‚

  4. Luciano Braga says:

    Very Good!!!

  5. Asif Islam says:

    Thanks Karthikeyan

  6. Junio says:

    Very nice Thanks!!!

  7. marrku says:

    Hey! Thanks for the tutorial! I’m trying to get it to work but just can’t. I copied all the code as that and can’t get it to work…

  8. Magnus Donner says:

    Fantastic Karthikeyan,

    I’ve been looking everywhere for something like this.

    I have a little question. I’m using this in Joomla module on my site. I need to touch the scroll wheel on mouse to see the effect/animation. Is it possible to modify this so that animation starts as soon as you load the page without need of touch scroll wheel?

    Sorry for my bad English.



  9. Brett S. says:

    I strangely have the opposite question as Magnus. I love the skill bar your created, but if the bar is down the page a bit, you never actually see it loading. You basically just see the end result, which is nice, but not ideal. How do I get it to load as the bar comes into view?

  10. Jason says:

    I think I’ve found a problem. If the percentage value is less then 20% it gets hidden behind the label?

    • Cristiano says:

      try to mess with the class skillbar-title and the skillbar-title span, put on the @media(media query) with some px you like using percentage with witdh and left , im trying right now, im just trying to fit the “wordpress” span cause is too big =)

  11. neatoz says:

    Hi Karthikeyan,
    Thats an excellent script ๐Ÿ™‚
    May I ask whats the license you got in file for that? Is it GPL compatible?

  12. John Peralta says:

    it’s not working to me. So sad. ๐Ÿ™

  13. Zetharus says:

    i have copied the codepen codes but it doesn’t show the bars or the percentage.

    all i got is the empty bars with the captions only, no percentages. it won’t even animate. halp pls!

  14. Adam Palethorpe says:

    Hi, I can get this to work on a weebly site but it will not work on mobile devices, what’s with that? You’re demo works fine on mobile devices just not MY version.

  15. Albert says:

    Cool Script ๐Ÿ™‚ working awesome in my browser

    Thanks Karthik

  16. Sajeesh says:

    Can you please tell me how to animate the bars in opposite direction.

    • Hi Sajeesh,

      Please use this css

      .skillbar-bar {
      float: right;

      I have added float:right ..


  17. SgtAbellana says:

    Where to place this?

  18. zoe says:

    Is it possible to use this code for commercial purpose? Like on a portfolio website?

  19. a says:

    hi, its not working for me on ie10 / ie11

  20. Gabriel Stein says:

    Hi Karthikeyan,
    First of all thanks for this code!
    May a suggest a fix on your code? For example, if you put 10% at any skillbar, it would not show up.
    How could I send you my solution?

  1. March 3, 2017

    […] Im currenlty using scrollrevealjs to show divs as they appear in the view port. Im also using as to animate bar charts. Now my problem is that I want that animation to take place, once the […]

Leave a Reply

Your email address will not be published. Required fields are marked *