kalasoo / numberprogressbar

A lovely progressbar

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.

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.

numberprogressbar's Issues

,

,

bower install error

There seems to be an error with one of your bower dependencies thats throws error bower install please check :

Velocity.js

bower Velocity.js#* ENOTFOUND Package Velocity.js not found

How about to use a monospace font as the default font?

To prevent the % jumping at 11, 21, etc.

I think Cutive Mono is similar to current font.

• http://www.google.com/fonts
• http://www.google.com/fonts/specimen/Cutive+Mono

Thank you!

A working example

Hi.

Perhaps I am being a bit slow or missing the point but do you have a working example where a a predefined number is reached rather than a randomly generated one? All of the examples seem random which doesn't help me understand how to properly use it for precise values. I looks great though!

Thanks,
Nat

countdown timer

Hi, i cannot success to set the progressbar to work as countdown timer. I'd like to set up a countdown timer that start from the end (100) and the line shrink to 0 in 15sec.

 var $basic = $('#progressTimer');
 var basicBar = $basic.find('.number-pb').NumberProgressBar({
  duration: 15000,
  style: 'basic',
  min: 1,
  max: 100,
  current: 100
});

var basicLoop = function() {
  basicBar.reach(undefined, {
    duration: 15000
  });
}

basicLoop();

and if its an easiest way to trigger the function, not in 3 separated function like above.
Thank you in advance!

making dynamic

what about multiple progress bar same div but different progress values?