pg.progress-bars v0.2.1

progress-bars

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

Demo

You can see demo on this page

Installation

• Via bower (preferred way)

bower install --save pg.progress-bars

• Download zip package

Usage

1. Add module as dependency to your app:

angular.module('your-app', ['pg.progress-bars']);

2. Add progress bar directive to template:

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

3. 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');

progressBar.start();

setTimeout(function () {
    //async result
    progressBar.done();
}, 1500);

4. Default progress bar styles you can find in demo/styles.css (at the bottom of file).

Module's components

• progressBar directive - directive for adding progress bar to the page.
• ProgressBarFactory - main progress bar constructor.
• ProgressBarsSettings provider provider - allows to define base classes for progress bar
• ProgressBarsStorage service - all directives registers in this storage.

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.

Usage

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

Directive params

Base progress bar template structure

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

Full example

<pg-progress-bar
    name="main"
    minimum="15"
    speed="350"
    trickle-rate="4"
    trickle-speed="400"
    animation="linear">
</pg-progress-bar>

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:

progressBar.start().inc().inc();

Public methods description

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.

ProgressBarsStorage service

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

var mainProgressBar = ProgressBarsStorage.get('main');
var completed = false;

mainProgressBar.start();

var getInterval = setInterval(function () {
    if (completed) {
        clearInterval(getInterval);
    }

    console.log(mainProgressBar.get());
}, 1000);

setTimeout(function () {
    mainProgressBar.done();
    completed = true;
}, 5000);