Lightweight Animated Skills Bar In jQuery - an-skill-bar
File Size: | 160 KB |
---|---|
Views Total: | 5412 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The an-skill-bar jQuery plugin lets you create animated skill/experience bars which can be used for online resumes.
The plugin creates horizontal progress bars to represents your skills/experiences in percentages.
How to use it:
1. Import the necessary JavaScript and CSS files into the HTML document.
<link rel="stylesheet" href="/an-skill-bar.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="/an-skill-bar.js"></script>
2. Create the HTML for the skill bars and specify the percentage values in the data-width
attribute:
<div class="skillbar html"> <div class="filled" data-width="90%"></div> <span class="title">HTML</span> <span class="percent">90%</span> </div> <div class="skillbar css"> <div class="filled" data-width="75%"></div> <span class="title"></i> CSS</span> <span class="percent">75%</span> </div> <div class="skillbar js"> <div class="filled" data-width="50%"></div> <span class="title">JS</span> <span class="percent">50%</span> </div>
3. Call the plugin on document ready to activate the skill bars.
$(document).ready(function () { $('.skillbar').skillbar(); });
4. Config the animation speed in milliseconds.
$(document).ready(function () { $('.skillbar').skillbar({ speed: 2000 }); });
5. Customize the background color of the skill bars.
$(document).ready(function () { $('.skillbar').skillbar({ bg: '' }); });
This awesome jQuery plugin is developed by hasanmisbah. For more Advanced Usages, please check the demo page or visit the official website.