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

File Size: 160 KB
Views Total: 5096
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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 class="skillbar css">
  <div class="filled" data-width="75%"></div>
  <span class="title"></i> CSS</span>
  <span class="percent">75%</span>

<div class="skillbar js">
  <div class="filled" data-width="50%"></div>
  <span class="title">JS</span>
  <span class="percent">50%</span>

3. Call the plugin on document ready to activate the skill bars.

$(document).ready(function () {

4. Config the animation speed in milliseconds.

$(document).ready(function () {
    speed: 2000

5. Customize the background color of the skill bars.

$(document).ready(function () {
    bg: ''

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