This time I will share jQuery Plugin and tutorial about Animated Responsive Skill Bar Plugin For jQuery – Simple SkillBar, hope it will help you in programming stack.
A super lightweight jQuery plugin used for rendering animated, horizontal, progressbar-style bars to showcase your skill/experience set in percentage.
How to use it:
1. Place the JavaScript file simple-skillbar.js after jQuery library and the Simple SkillBar is ready for use.
1 |
<script src="//code.jquery.com/jquery.3.1.1.slim.min.js"></script> |
2 |
<script src="simple-skillbar.js"></script> |
2. Create a basic skill bar and define the percentage value using JavaScript:
1 |
<div id="skill">JavaScript (80%)</div> |
1 |
$('#skill').simpleSkillbar({ |
3. Create a basic skill bar and define the percentage value using JavaScript:
1 |
<div id="skill">JavaScript (80%)</div> |
1 |
$('#skill').simpleSkillbar({ |
4. Or via HTML5 data attribute as this:
1 |
<div id="skill" data-width="80">JavaScript (80%)</div> |
1 |
$('#skill').simpleSkillbar(); |
5. More JS settings and data attributes to customize your skill bar.
01 |
$('#skill').simpleSkillbar({ |
10 |
text-background: '#337ab7', |
This awesome jQuery plugin is developed by leonhards. For more Advanced Usages, please check the demo page or visit the official website.
