JavaScript CSS
Latest commit afe6b19 Oct 29, 2014 @kalasoo add reverse readme
Failed to load latest commit information.
src for show pages May 2, 2014
LICENSE Initial commit May 2, 2014 add reverse readme Oct 29, 2014
bower.json update bower.json May 2, 2014
index.html add reverse Oct 29, 2014
number-pb.css add min max curr May 17, 2014
number-pb.js add reverse Oct 29, 2014
style.css style change May 6, 2014

NumberProgressBar Demo

A lovely progressbar. Inspired by daimajia.


To-do List

  • Support multiple number styles
    • percentage
    • numerator / denominator
    • reverse
    • negative number
    • customizable
  • Fix bug of multiple reach operations
  • Add color option


bower install NumberProgressBar [--save]


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

You can refer to the file number-pb.css and make your own modifications.

.number-pb {
  position: relative;
  height: 3px;
  background-color: #ddd;

.number-pb .number-pb-shown {
  position: absolute;
  background-color: #176785;
  background-image: linear-gradient(to right, #176785, #499989);
  top: -1px;
  left: 0;
  height: 5px;
  -moz-box-shadow:    0 0 3px 0 #499989;
  -webkit-box-shadow: 0 0 3px 0 #499989;
  box-shadow:         0 0 3px 0 #499989;

.number-pb .number-pb-num {
  position: absolute;
  background-color: #fff;
  left: 0;
  top: -0.45em;
  padding: 0 5px; 
var basicBar = $basic.find('.number-pb').NumberProgressBar({
  style: 'basic',
  min: A_MIN_NUMBER,
var percentageBar = $('.number-pb').NumberProgressBar({
  style: 'percentage'  
var stepBar = $('.number-pb').NumberProgressBar({
  style: 'step',
  max: maxStep
/* For stepBar:
   min is set to 0 automatically,
   max is supposed to be > 0 */
bars.reach(dest, reachOptions);  //dest is the progress # at which you want to reach



These are the options you can configure when initializing a progressbar.

Option Default Usage
style basic [basic, percentage, step]
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
reverse false If true, count down 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


These are the options for each reach operation: bar.reach(dest, reachOptions).

Option Default Usage
duration null The duration for a reach operation.
complete null The callback when a reach operation is done.