A jQuery Based lightweight skill bar filler

Demo

add an-skill-bar css to html head section

<link rel="stylesheet" href="an-skill-bar.min.css">

and then add javascript file after jquery library

<script src="scripts/an-skill-bar.js"></script>

• jquery 3.3.1 or later

Initialize your markup like this

<div class="skillbar">
      <span class="title"></i> less</span>
      <span class="percent">40%</span>
      <div class="filled" data-width="90%"></div>
</div>

you can use our predefined class like this

<div class="skillbar html">
      <span class="title"></i> less</span>
      <span class="percent">40%</span>
      <div class="filled" data-width="90%"></div>
</div>

Predefined Class

html, css, js, php, jquery, sass, less, react, nodejs,
angular, vue, meteor, backbone, ember, mysql, python, django,
agile, photoshop, illustrator, indesign, laravel

$(document).ready(function () {
    $(".skillbar").skillbar();
});

you can pass value with this

$(document).ready(function () {
    $(".skillbar").skillbar({
        speed: 1000,
        bg : "#008080"
    });
});

add a class name after skillbar class customize it with your own style like <div class="skillbar myownclass"></div> and then call it to your css file like

.skillbar.myownclass .title{
/* Your style goes here */
}
.skillbar.myownclass .percent{
/* Your style goes here */
}
.skillbar.myownclass .filled{
/* Your style goes here */
}

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.

MIT