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.