Minimal Customizable jQuery Progress Bar Plugin - LineProgressbar

Minimal Customizable jQuery Progress Bar Plugin - LineProgressbar
File Size: 4.98 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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%'
});

Change log:

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.