Animated Slim Progress Bar Plugin with jQuery - Number Progress Bar
File Size: | 45.9 KB |
---|---|
Views Total: | 4572 |
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.