jQuery & CSS3 Skills Bar

HTML5
20%
CSS3
25%
jQuery
50%
PHP
40%
Wordpress
75%
SEO
100%
Photoshop
70%
		          
          <div class="spd-row spd-padding-top-bottom-50 wow bounceInUp">
  <h3 class="spd-text-center spd-padding-bottom-50">jQuery &amp; CSS3 Skills Bar</h3>
  <div class="skillbar clearfix " data-percent="20%">
    <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span> </div>
    <div class="skillbar-bar" style="background: #e67e22;"> </div>
    <div class="skill-bar-percent">20% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="25%">
    <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span> </div>
    <div class="skillbar-bar" style="background: #3498db;"> </div>
    <div class="skill-bar-percent">25% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="50%">
    <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span> </div>
    <div class="skillbar-bar" style="background: #2c3e50;"> </div>
    <div class="skill-bar-percent">50% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="40%">
    <div class="skillbar-title" style="background: #46465e;"><span>PHP</span> </div>
    <div class="skillbar-bar" style="background: #5a68a5;"> </div>
    <div class="skill-bar-percent">40% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="75%">
    <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span> </div>
    <div class="skillbar-bar" style="background: #525252;"> </div>
    <div class="skill-bar-percent">75% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="100%">
    <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span> </div>
    <div class="skillbar-bar" style="background: #2ecc71;"> </div>
    <div class="skill-bar-percent">100% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="70%">
    <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span> </div>
    <div class="skillbar-bar" style="background: #4288d0;"> </div>
    <div class="skill-bar-percent">70% </div>
  </div>
  <!-- End Skill Bar -->
</div>

jQuery & CSS3 Skills Bar

HTML5
20%
CSS3
25%
jQuery
50%
PHP
40%
Wordpress
75%
SEO
100%
Photoshop
70%
		     
          <div class="spd-row spd-padding-top-bottom-50 wow bounceInUp">
  <h3 class="spd-text-center spd-padding-bottom-50">jQuery &amp; CSS3 Skills Bar</h3>
  <div class="skillbar clearfix " data-percent="20%">
    <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span> </div>
    <div class="skillbar-bar-style" style="background: #e67e22;"> </div>
    <div class="skill-bar-percent">20% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="25%">
    <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span> </div>
    <div class="skillbar-bar-style" style="background: #3498db;"> </div>
    <div class="skill-bar-percent">25% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="50%">
    <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span> </div>
    <div class="skillbar-bar-style" style="background: #2c3e50;"> </div>
    <div class="skill-bar-percent">50% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="40%">
    <div class="skillbar-title" style="background: #46465e;"><span>PHP</span> </div>
    <div class="skillbar-bar-style" style="background: #5a68a5;"> </div>
    <div class="skill-bar-percent">40% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="75%">
    <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span> </div>
    <div class="skillbar-bar-style" style="background: #525252;"> </div>
    <div class="skill-bar-percent">75% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="100%">
    <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span> </div>
    <div class="skillbar-bar-style" style="background: #2ecc71;"> </div>
    <div class="skill-bar-percent">100% </div>
  </div>
  <!-- End Skill Bar -->
  <div class="skillbar clearfix " data-percent="70%">
    <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span> </div>
    <div class="skillbar-bar-style" style="background: #4288d0;"> </div>
    <div class="skill-bar-percent">70% </div>
  </div>
  <!-- End Skill Bar -->
</div>

flat Skills Bar2

HTML5
20%
CSS3
25%
jQuery
50%
PHP
40%
Wordpress
75%
SEO
100%
Photoshop
70%
		              
            <div class="skillbar2 clearfix " data-percent="20%">
      <div class="skillbar-title"><span>HTML5</span> </div>
      <div class="skillbar-bar2" style="background: #e67e22;"> </div>
      <div class="skill-bar-percent">20% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="25%">
      <div class="skillbar-title"><span>CSS3</span> </div>
      <div class="skillbar-bar2" style="background: #3498db;"> </div>
      <div class="skill-bar-percent">25% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="50%">
      <div class="skillbar-title"><span>jQuery</span> </div>
      <div class="skillbar-bar2" style="background: #2c3e50;"> </div>
      <div class="skill-bar-percent">50% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="40%">
      <div class="skillbar-title"><span>PHP</span> </div>
      <div class="skillbar-bar2" style="background: #5a68a5;"> </div>
      <div class="skill-bar-percent">40% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="75%">
      <div class="skillbar-title"><span>Wordpress</span> </div>
      <div class="skillbar-bar2" style="background: #525252;"> </div>
      <div class="skill-bar-percent">75% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="100%">
      <div class="skillbar-title"><span>SEO</span> </div>
      <div class="skillbar-bar2" style="background: #2ecc71;"> </div>
      <div class="skill-bar-percent">100% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="70%">
      <div class="skillbar-title"><span>Photoshop</span> </div>
      <div class="skillbar-bar2" style="background: #4288d0;"> </div>
      <div class="skill-bar-percent">70% </div>
    </div>
    <!-- End Skill Bar -->
  HTML5
20%
  CSS3
25%
  jQuery
50%
  PHP
40%
  DNN
75%
  SEO
100%
  Design
70%
		  
            <div class="skillbar2 clearfix " data-percent="20%">
      <div class="skillbar-title"><span> <i class="fa fa-html5 fa-lg"></i>&nbsp; HTML5</span> </div>
      <div class="skillbar-bar2" style="background: #e67e22;"> </div>
      <div class="skill-bar-percent">20% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="25%">
      <div class="skillbar-title"><span> <i class="fa fa-css3 fa-lg"></i>&nbsp; CSS3</span> </div>
      <div class="skillbar-bar2" style="background: #3498db;"> </div>
      <div class="skill-bar-percent">25% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="50%">
      <div class="skillbar-title"><span> <i class="fa fa-tencent-weibo fa-lg"></i>&nbsp; jQuery</span> </div>
      <div class="skillbar-bar2" style="background: #2c3e50;"> </div>
      <div class="skill-bar-percent">50% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="40%">
      <div class="skillbar-title"><span> <i class="fa fa-paypal fa-lg"></i>&nbsp; PHP</span> </div>
      <div class="skillbar-bar2" style="background: #5a68a5;"> </div>
      <div class="skill-bar-percent">40% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="75%">
      <div class="skillbar-title"><span> <i class="fa fa-terminal fa-lg"></i>&nbsp; DNN </span> </div>
      <div class="skillbar-bar2" style="background: #525252;"> </div>
      <div class="skill-bar-percent">75% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="100%">
      <div class="skillbar-title"><span> <i class="fa fa-lastfm fa-lg"></i>&nbsp; SEO</span> </div>
      <div class="skillbar-bar2" style="background: #2ecc71;"> </div>
      <div class="skill-bar-percent">100% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar2 clearfix " data-percent="70%">
      <div class="skillbar-title"><span> <i class="fa fa-send-o fa-lg"></i>&nbsp; Design</span> </div>
      <div class="skillbar-bar2" style="background: #4288d0;"> </div>
      <div class="skill-bar-percent">70% </div>
    </div>
    <!-- End Skill Bar -->

jQuery & CSS3 Skills Bar

  HTML5
80%
  CSS3
75%
  jQuery
50%
  PHP
40%
  DNN
75%
  SEO
100%
  Design
70%
				
               
               <div class="skillbar clearfix " data-percent="80%">
      <div class="skillbar-title" style="background: #d35400;"><span> <i class="fa fa-html5 fa-lg"></i>&nbsp; HTML5</span> </div>
      <div class="skillbar-bar" style="background: #e67e22;"> </div>
      <div class="skill-bar-percent">80% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="75%">
      <div class="skillbar-title" style="background: #2980b9;"><span> <i class="fa fa-css3 fa-lg"></i>&nbsp; CSS3</span> </div>
      <div class="skillbar-bar" style="background: #3498db;"> </div>
      <div class="skill-bar-percent">75% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="50%">
      <div class="skillbar-title" style="background: #2c3e50;"><span> <i class="fa fa-tencent-weibo fa-lg"></i>&nbsp; jQuery</span> </div>
      <div class="skillbar-bar" style="background: #2c3e50;"> </div>
      <div class="skill-bar-percent">50% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="40%">
      <div class="skillbar-title" style="background: #46465e;"><span> <i class="fa fa-paypal fa-lg"></i>&nbsp; PHP </span> </div>
      <div class="skillbar-bar" style="background: #5a68a5;"> </div>
      <div class="skill-bar-percent">40% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="75%">
      <div class="skillbar-title" style="background: #333333;"><span> <i class="fa fa-terminal fa-lg"></i>&nbsp; DNN </span> </div>
      <div class="skillbar-bar" style="background: #525252;"> </div>
      <div class="skill-bar-percent">75% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="100%">
      <div class="skillbar-title" style="background: #27ae60;"><span> <i class="fa fa-lastfm fa-lg"></i>&nbsp; SEO</span> </div>
      <div class="skillbar-bar" style="background: #2ecc71;"> </div>
      <div class="skill-bar-percent">100% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="70%">
      <div class="skillbar-title" style="background: #124e8c;"><span> <i class="fa fa-send-o fa-lg"></i>&nbsp; Design </span> </div>
      <div class="skillbar-bar" style="background: #4288d0;"> </div>
      <div class="skill-bar-percent">70% </div>
    </div>
    <!-- End Skill Bar -->
  HTML5
80%
  CSS3
75%
  jQuery
50%
  PHP
40%
  DNN
75%
  SEO
100%
  Design
70%
				
            
            <div class="skillbar clearfix " data-percent="80%">
      <div class="skillbar-title" style="background: #d35400;"><span>&nbsp; HTML5</span> </div>
      <div class="skillbar-bar" style="background: #e67e22;"> </div>
      <div class="skill-bar-percent">80% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="75%">
      <div class="skillbar-title" style="background: #2980b9;"><span>&nbsp; CSS3</span> </div>
      <div class="skillbar-bar" style="background: #3498db;"> </div>
      <div class="skill-bar-percent">75% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="50%">
      <div class="skillbar-title" style="background: #2c3e50;"><span>&nbsp; jQuery</span> </div>
      <div class="skillbar-bar" style="background: #2c3e50;"> </div>
      <div class="skill-bar-percent">50% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="40%">
      <div class="skillbar-title" style="background: #46465e;"><span>&nbsp; PHP </span> </div>
      <div class="skillbar-bar" style="background: #5a68a5;"> </div>
      <div class="skill-bar-percent">40% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="75%">
      <div class="skillbar-title" style="background: #333333;"><span>&nbsp; DNN </span> </div>
      <div class="skillbar-bar" style="background: #525252;"> </div>
      <div class="skill-bar-percent">75% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="100%">
      <div class="skillbar-title" style="background: #27ae60;"><span>&nbsp; SEO</span> </div>
      <div class="skillbar-bar" style="background: #2ecc71;"> </div>
      <div class="skill-bar-percent">100% </div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="70%">
      <div class="skillbar-title" style="background: #124e8c;"><span>&nbsp; Design </span> </div>
      <div class="skillbar-bar" style="background: #4288d0;"> </div>
      <div class="skill-bar-percent">70% </div>
    </div>
    <!-- End Skill Bar -->