Animated Skill Bar and Progress Bar with jQuery & CSS3

by
Post Views: 1,298

Today I am going to tell you how to create simple animated Skill Bar / Progress Bar in two lines of jQuery code.

The skill bar  gives you an opportunity to show visitors to your site how qualified you and your teams are. Add a skill title, percentage of proficiency, and a color (hex value). It’s a quick and colorful way to showcase your knowledge about you and your team.

Only few lines of jQuery and CSS code, we can easily implement this Animated Skill bar in  your web application

Please check my latest tutorial on Top 20 Useful jQuery Code Snippets for Web Developers

Skill Bar with jQuery & CSS3
Skill Bar with jQuery & CSS3

Contents

jQuery Code to Animate Skill Bar

jQuery('.skillbar').each(function(){

jQuery(this).find('.skillbar-bar').animate({

width:jQuery(this).attr('data-percent')

},6000);

});

CSS3 Code for Animation

.skillbar {

position:relative;

display:block;

margin-bottom:15px;

width:100%;

background:#eee;

height:35px;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

-webkit-transition:0.4s linear;

-moz-transition:0.4s linear;

-ms-transition:0.4s linear;

-o-transition:0.4s linear;

transition:0.4s linear;

-webkit-transition-property:width, background-color;

-moz-transition-property:width, background-color;

-ms-transition-property:width, background-color;

-o-transition-property:width, background-color;

transition-property:width, background-color;

}


.skillbar-title {

position:absolute;

top:0;

left:0;

font-weight:bold;

font-size:13px;

color:#fff;

background:#6adcfa;

-webkit-border-top-left-radius:3px;

-webkit-border-bottom-left-radius:4px;

-moz-border-radius-topleft:3px;

-moz-border-radius-bottomleft:3px;

border-top-left-radius:3px;

border-bottom-left-radius:3px;

}


.skillbar-title span {

display:block;

background:rgba(0, 0, 0, 0.1);

padding:0 20px;

height:35px;

line-height:35px;

-webkit-border-top-left-radius:3px;

-webkit-border-bottom-left-radius:3px;

-moz-border-radius-topleft:3px;

-moz-border-radius-bottomleft:3px;

border-top-left-radius:3px;

border-bottom-left-radius:3px;

}


.skillbar-bar {

height:35px;

width:0px;

background:#6adcfa;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

}


.skill-bar-percent {

position:absolute;

right:10px;

top:0;

font-size:11px;

height:35px;

line-height:35px;

color:#444;

color:rgba(0, 0, 0, 0.4);

}

HTML Code

<div class="skillbar clearfix " data-percent="65%">

<div class="skillbar-title" style="background: #88cd2a;"><span>HTML5</span></div>

<div class="skillbar-bar" style="background: #88cd2a;"></div>

<div class="skill-bar-percent">65%</div>

</div>

Popular Posts from jQuery

View Live Demo

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

32 thoughts on “Animated Skill Bar and Progress Bar with jQuery & CSS3”

  1. i copy the same code and paste to my portfolio website to used but it’s not work problem is..
    Uncaught ReferenceError: jQuery is not defined
    please give me solution.

    Reply

  3. 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?

    Reply
  4. Pingback: Trigger jQuery after scrollrevealjs shows the div

    • 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

      Reply

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

    Reply

  11. 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!

    Reply

    • 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 =)

      Reply

  15. 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?

    Reply

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

    Reply

  17. 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…

    Reply

  22. 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?

    Reply

Leave a Comment