Minimal Customizable jQuery Progress Bar Plugin - LineProgressbar

LineProgressbar is a super tiny jQuery plugin that helps you create horizontal, animated, line chart-style progress bars with or without percentage values. It can be used to create progress/skill/experience indicators.

How to use it:

1. Load the jQuery LineProgressbar plugin's stylesheet jquery.lineProgressbar.css to style the progress bars.

<link href="dist/jquery.lineProgressbar.css" rel="stylesheet">

2. Create a progress bar container as this:

<div id="jq"></div>

3. Load both jQuery library and the jQuery LineProgressbar plugin's script jquery.lineProgressbar.js at the bottom of the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.lineProgressbar.js"></script>

4. Initialize the plugin and set the percentage value you want to animate the progress bar to.

$('#jq').LineProgressbar({
  percentage: 90 // 90%
});

5. Show/hide the percent counter.

$('#jq').LineProgressbar({
  percentage: 90,
  ShowProgressCount: true
});

6. Customize the duration in milliseconds.

$('#jq').LineProgressbar({
  percentage: 90,
  duration: 1000
});

7. The default styling options

$('#jq').LineProgressbar({
  percentage: 90,
  fillBackgroundColor: '#3498db',
  backgroundColor: '#EEEEEE',
  radius: '0px',
  height: '10px',
  width: '100%'
});

8. You can also implement the LineProgressbar plugin using HTML data attributes without any JS call.

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

Changelog:

v1.1.2 (2019-03-22)

• Added HTML data.

2017-11-28

• Update progressTo function

---

This awesome jQuery plugin is developed by kingRayhan. For more Advanced Usages, please check the demo page or visit the official website.