Lightweight Animated Skills Bar In jQuery - an-skill-bar

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.