How to Make Animated Skill Bar Using jQuery, HTML And CSS

In this tutorial we will show you how to create animated skill bar using jQuery, HTML and CSS.You may also like animated progress bar using jquery. You may also like How to Animated progress bar using jquery, html and css and How to Create File Upload Progress Bar Using jQuery and PHP.

HTML Code

<div class="skillbar_wrapper">
   <div class="skillbar_bar" id="skillbar_php"></div>
   <div class="skill_bar_percent">85%</div>
</div>

CSS Code

<style>
   .skillbar_wrapper 
   {
      float:left;
      position:relative;
      display:block;
      margin-bottom:15px;
      width:400px;
      background-color:#E6E6E6;
      height:40px;
      border-radius:0px 3px 3px 0px;
   }
   .skillbar_bar 
   {
      height:40px;
      width:0px;
      border-radius:0px 3px 3px 0px;
   }
   #skillbar_php
   {
      background-color:#01DFD7;
   }

   .skill_bar_percent 
   {
      position:absolute;
      right:10px;
      top:0;
      font-size:12px;
      height:35px;
      line-height:35px;
      color:black;
   }
</style>

jQuery Code

<script type="text/javascript">
   $(document).ready(function(){
           $("#skillbar_php").animate({width:'85%'},1500);
       });
</script>