Minimal Customizable jQuery Progress Bar Plugin - LineProgressbar

File Size: 5.61 KB
Views Total: 19442
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.

  percentage: 90 // 90%

5. Show/hide the percent counter.

  percentage: 90,
  ShowProgressCount: true

6. Customize the duration in milliseconds.

  percentage: 90,
  duration: 1000

7. The default styling options

  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 


v1.1.2 (2019-03-22)

  • Added HTML data.


  • 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.