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.

    BR

    Magnus

  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 {
      height:35px;
      width:0px;
      background:#6adcfa;
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      float: right;
      }

      I have added float:right ..

      Thanks

  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 http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/ 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 *