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>