How to create responsive animated skill bars using jQuery – Simple SkillBar

If you want to display user’s skills in very attractive way this plugin is very useful to create responsive animated skill horizontal, progress bar in percentage. This is super light waited plugin and need very small configuration and all done. You can also use this plugin to any type off skills related horizontal chart.
skill-bar-jquery
Let’s start integration, First add required jquery libraries on page don’t forget to add jquery code library before using simple-skillbar.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="simple-skillbar.js"></script>




Now there is two method to display skill bar chart By passing jquery properties and by using HTML5 data attribute.

Display a basic horizontal skill bar and define the percentage value using JavaScript

<div id="skillbar">NodeJS (50%)</div>
<script>
$(function() {   
$('.skillbar').simpleSkillbar({
  width: 50
});
});
</script>




Display a basic horizontal skill bar and define the percentage value using HTML5 data attribute

<div id="skillbar" data-width="50">NodeJS (50%)</div>
<script>
$(function() {   
$('.skillbar').simpleSkillbar();
});
</script>

You can customize your skill bar by passing more data attribute properties like data-background, data-text-color

<div  class="skillbar" data-width="80" data-background="#f4bf42">PHP (80%)</div>
<div  class="skillbar" data-width="70" data-background="#f45341">MySql (70%)</div>
<div  class="skillbar" data-width="85" data-background="#eef441">JavaScript (85%)</div>
<div  class="skillbar" data-width="90" data-background="#82f441">HTML5(90%)</div>
<div  class="skillbar" data-width="80" data-background="#417cf4">CSS3 (80%)</div>
<div  class="skillbar" data-width="60" data-background="#e541f4">AngularJS (60%)</div>
<div  class="skillbar" data-width="40" data-background="#f44185">NodeJs (40%)</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="simple-skillbar.js"></script>
<script>
$('.skillbar').simpleSkillbar();
</script>

See Live Demo and Download source code.

DEMO | DOWNLOAD



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.