Animated Slim Progress Bar Plugin with jQuery - Number Progress Bar

Number Progress Bar is a jQuery plugin that creates a slim progress bar with support for accelerated Javascript animations and custom value range.

How to use it:

1. Load the required number-pb.css in the head section of the document.

<link rel="stylesheet" type="text/css" href="number-pb.css">

2. The Html to create a progress bar.

<div class="number-pb">
  <div class="number-pb-shown"></div>
  <div class="number-pb-num">0%</div>
</div>

3. Include the jQuery Number Progress Bar plugin and other necessary resources at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="src/jquery.velocity.min.js"></script>
<script src="number-pb.js"></script>

4. The jQuery script to enable the progress bar.

var bars = $('.number-pb').NumberProgressBar(barOptions);
bars.reach(dest, reachOptions);  //dest is the progress # at which you want to reach

5. The default bar options.

• duration: 10000, - The duration (in ms) needed from 0 to 100
• min: 0, - The min # of the progress
• max: 100, - The max # of the progress
• current: 0, - The initial # of the progress
• shownQuery: '.number-pb-shown', - Your query string for the shown bar
• numQuery: '.number-pb-num' - Your query string for the number

6. The default reachOptions.

• duration - The duration for a reach operation.
• complete - The callback when a reach operation is done.

---

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