Animated Slim Progress Bar Plugin with jQuery - Number Progress Bar

Animated Slim Progress Bar Plugin with jQuery - Number Progress Bar
File Size: 45.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.