Minimal Animated Horizontal Bar Graph Plugin - jQuery SkillProgress

Skills are a great way to convey the things you know how to do, i.e., your knowledge, but they can get stale and repetitive quickly.

The SkillProgress jQuery plugin uses animated horizontal progressbars to illustrate your skills, experiences, goals, or anything else you may want to track over time. This way, users don't have to read an entire list of skills and can point out where they think they might have the most room for development and improvement.

How to use it:

1. Add the main JavaScript skillProgress.min.js to the webpage which has jQuery library loaded.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/skillProgress.min.js"></script>

2. Add your skillbars to the horizontal bar graph. Each skill bar consists of an empty bar and a full bar from where the percentage fills in.

<div class="chart">
  <h6 class="chart_bar">HTML/CSS</h6><h6 class="label">100%</h6><br>
  <h6 class="chart_bar">JAVASCRIPT/JQUERY</h6><h6 class="label">80%</h6><br>
  <h6 class="chart_bar">PHP</h6><h6 class="label">50%</h6><br>
  <h6 class="chart_bar">C++</h6><h6 class="label">80%</h6><br>
  <h6 class="chart_bar">C#</h6><h6 class="label">80%</h6><br>
  <h6 class="chart_bar">C</h6><h6 class="label">60%</h6><br>
  <h6 class="chart_bar">SQL</h6><h6 class="label">80%</h6><br>
  <h6 class="chart_bar">PYTHON</h6><h6 class="label">80%</h6><br>
  <h6 class="chart_bar">SUITE ADOBE</h6><h6 class="label">30%</h6><br>
</div>

3. Initialize the plugin and pass the following parameters to the SkillProgress method.

• chartClass: Chart class
• chartBarClass: Bar class
• labelClass: Label class
• startDelay: Time to wait before animating the bars
• timeAnimation: Animation speed

// SkillProgress(chartClass, chartBarClass, labelClass, startDelay, timeAnimation);
SkillProgress(".chart", ".chart_bar", ".label", 100, 1500);

---

This awesome jQuery plugin is developed by Lucci93. For more Advanced Usages, please check the demo page or visit the official website.