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

Installation

bower install NumberProgressBar [--save] 

Usage

HTML

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

CSS

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;  }

javaScript

var basicBar = $basic.find('.number-pb').NumberProgressBar({   style: 'basic',   min: A_MIN_NUMBER,   max: A_MAX_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

Options

barOptions

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

reachOptions

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