Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

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

by
Category:php
php jquery html css
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>

0 Comments


Html code work in comment box


Related Post