en-GBpl-PLbg-BG

jQuery & CSS3 Skills Bar

HTML5
20%
CSS3
25%
jQuery
50%
PHP
40%
Wordpress
75%
SEO
100%
Photoshop
70%

Get The Code: 

		          
          <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%

Get The Code: 

		     
          <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%

Get The Code: 

		              
            <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%

Get The Code: 

		  
            <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%

Get The Code: 

				
               
               <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%

Get The Code: 

				
            
            <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 -->
bflix