0.2.1 • Public • Published

progress-bars Build Status

Changes history you can find here

Main features

  • Independent from $digest cycle (don't run unnecessary cycles)
  • Can place many progress bars on one page
  • Full control of each bar
  • Custom progress-bar container
  • Simple customization via css


You can see demo on this page


  • Via bower (preferred way)
bower install --save pg.progress-bars


  1. Add module as dependency to your app:
angular.module('your-app', ['pg.progress-bars']);
  1. Add progress bar directive to template:
<pg-progress-bar name="some-name"></pg-progress-bar>
  1. Now you can inject ProgressBarsStorage service and get full control of your progress bars.
    Just get it by name:
var progressBar = ProgressBarsStorage.get('some-name');
setTimeout(function () {
    //async result
}, 1500);
  1. Default progress bar styles you can find in demo/styles.css (at the bottom of file).

Module's components

progressBar directive

Directive will be replaced by its template. For customization different progress bars you can add classes to it. It will be merged with template classes.


<pg-progress-bar name="main"></pg-progress-bar>

Directive params

Name Binding Type Default value Description Example
name @ You must specify name of each progress bar for get it then through ProgressBarsStorage <pg-progress-bar name="main"></pg-progress-bar>
minimum @ 8 Minimum value from which started progress bar <pg-progress-bar name="main" minimum="25"></pg-progress-bar>
speed @ 250 Speed of each width increasing <pg-progress-bar name="main" speed="500"></pg-progress-bar>
trickleRate @ 2 Multiplier of each increasing of width when progress bar is running <pg-progress-bar name="main" trickle-rate="5"></pg-progress-bar>
trickleSpeed @ 300 Multiplier of each increasing of width when progress bar is running <pg-progress-bar name="main" trickle-rate="5"></pg-progress-bar>
animation @ 'ease-out' Type of css animation <pg-progress-bar name="main" animation="linear"></pg-progress-bar>

Base progress bar template structure

<div class="progress__container"><div class="progress__bar"></div></div>

Full example


ProgressBar factory

Don't use it directly, it will be constructed when you use html <pg-progress-bar></pg-progress-bar> directive. Then you can get instance of ProgressBar class from ProgressBarsStorage and use methods.
You can combine method calls to chain (only for non-get methods). Example:


Public methods description

Method Params Returns Description Example
start this Start progress bar. It will constantly increase its width value prior to calling done or stop method progressBar.start()
stop this Stop increasing value of width progressBar.stop()
done this Complete progress bar work progressBar.done()
get {number} - width value Get current width of progress bar progressBar.get()
set {number} value this Set width of progress bar progressBar.set(45)
inc {number} [value] this Increase value of progress bar to specified value or random value if it not specified;
isInProgress {boolean} - is running value Whether running or not progress bar now progressBar.isInProgress()

ProgressBarsSettings provider

You can use this methods only in config block. All methods returns this so you can chaining methods calls. For default values I used BEM methodology class naming convention.

Method Params Default Value Description Example
setContainerClass {string} className progress__container Set container's class. ProgressBarsSettingsProvider.setContainerClass('progress-container')
setBarClass {string} className progress__bar Set progress bar's class. ProgressBarsSettingsProvider.setContainerClass('progress-bar')
setShowingClass {string} className progress__container_showing Set container's class which will be added when progress bar is running. ProgressBarsSettingsProvider.setShowingClass('progress-bar-showing')

ProgressBarsStorage service

This service has only one public method: get. With this method you can get ProgressBar instance and use its methods.

var mainProgressBar = ProgressBarsStorage.get('main');
var completed = false;
var getInterval = setInterval(function () {
    if (completed) {
}, 1000);
setTimeout(function () {
    completed = true;
}, 5000);


npm i pg.progress-bars

DownloadsWeekly Downloads






Last publish


  • crabl