JavaScript CSS
Latest commit afe6b19 Oct 29, 2014 @kalasoo add reverse readme
Permalink
Failed to load latest commit information.
src for show pages May 2, 2014
LICENSE Initial commit May 2, 2014
README.md 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

README.md

NumberProgressBar Demo

A lovely progressbar. Inspired by daimajia.

demo

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.

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

reachOptions

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.