Jquery Line Progress Bar

A light weight jquery progressbar plugin

Demos and Docs

https://kingrayhan.github.io/LineProgressbar/

Include

<!-- In header -->
<link rel="stylesheet" href="jquery.lineProgressbar.css">

<!-- In footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lineProgressbar.min.js"></script>

Jquery Options method

Set HTML

You don't need any special markup. All you need is to give a class or id selector to a div.

<div id="progressbar1"></div>

Call the plugin

Now call the Line Progress Bar initializer function and your progress bar is ready.

$('#progressbar1').LineProgressbar();

All Jquery Options

Demo

Data Attribute method

You don't need to provide any options in this method, all you need just to put data attributes

<div 
    line-progressbar 
    data-percentage="25" 
    data-progress-color="#1abc9c"></div>

All Data attributes

Demo

FAQ

Can I use it for free? Answer: Yes

Can I use it for commerce project? Answer: Yes

Has it any licence? Answer: Yes , it's under MIT LICENCE. Check here

Can i ask for a new functionality? Answer: Yes! Go to Github issues page and ask for a feature.

What's new in latest release? Answer: See Changelog.