hasanmisbah / an-skill-bar

jQuery Based skill progress bar.

an-skill-bar

A jQuery Based lightweight skill bar filler

Demo

Demo

Installation

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>

Requirements

• jquery 3.3.1 or later

Usage

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

initialize plugin with jquery

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

you can pass value with this

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

custom Style or color

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 */
}

Contributing

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.

License

MIT