Fork me on GitHub

Installation

Created by
@KingRayhan

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

<!-- In footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="jquery.lineProgressbar.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