Angular Tek Progress-bar

angular-tek-progress-bar is an AngularJS module to create and controls progress bar.

Overview

I began to code this module, because it became problematic to get a necessary behavior from ui.bootstrap.progressbar. Then i came across pg.progress-bars - it gave a possibility to reach the necessary behavior, but it had a couple of drawbacks - when the directive loaded during the controller processing, there was no possibility to gain the control of it. Also it is sometimes more comfortable for me to simply change the value of progress without additional methods. That's why i decided to combine the concepts of these two units, having reconsidered their concepts.

Features

• Has two different control interfaces (simple by ng-model and advanced by manager)
• Can control css animation
• By default fully comparable with bootstrap
• Fully customizable wia css
• Can work without digest (if you do not use ng-model)
• Has vertical mode

Demo

http://tekvando.github.io/Angular-Tek-Progress-bar/

Installing

Install through bower:

bower install --save angular-tek-progress-bar

or via npm

npm install --save angular-tek-progress-bar

or download

Initialize the plugin by referencing the necessary files:

<script src="dist/tek.progress-bar.min.js"></script>

if you want you can use my progress-bar styles

Define module in your app:

angular.module('yourModule', ['Tek.progressBar'])

Examples

Basic

Javascript

$scope.progressVal = 0;

Html

<tek-progress-bar ng-model="progressVal"></tek-progress-bar>

Advanced Through progressBarManager you can reach advanced control on progress bar

Javascript

$scope.progressManager = progressBarManager();

Html

<tek-progress-bar manager="progressManager"></tek-progress-bar>

Combined

Javascript

$scope.progressManager = progressBarManager(); 
$scope.progressVal = 0;

Html

<tek-progress-bar ng-model="progressVal" manager="progressManager"></tek-progress-bar>

Vertical mode required vertical class

$scope.progressVal = 0;   

Html

<tek-progress-bar mode="vertical" ng-model="progressVal""></tek-progress-bar>

Css

.progress.vertical {
    float: left;
    height: 100%;
    margin-right: 20px;
    width: 20px;
}

API

tek-progress-bar directive

Then value of progress-bar equal 0 it will be added class bar-empty Then value of progress-bar equal 100 it will be added class bar-full

<tek-progress-bar
     manager="{object:progressBarManagerObject}"
     class="{sting:progress-container-element-class}"
     barClass="{sting:progress-bar-element-class}"
     mode="{string: 'horizontal or vertical'}"
     ng-model="{number:model}">
</tek-progress-bar>

template structure

<div class='progress' ng-class='bar.containerClass'>
    <div class='progress-bar' ng-class='bar.barClass' ng-transclude></div>
</div>

You can change it:

$templateCache.put('Tek.progressBarDirective.html', "Your template");

progressBarManager({object:paramsObj})

paramsObj: { incrementSpeed: {number} - default 300 incrementStrategy: {function} }

How it works

Then tek-progress-bar directive will initialize progressBarManager will set params witch you pass them from the controller. One of benefit to use progressBarManager its that you can manipulate tek-progress-bar directive even if its not initialized yet.

Method	Params	Return	Description
getPromise		{object:promise}	this method return promise witch indicate then tek-progress-bar directive loaded
get		{number}	this method return current progress value
set	number	{this}	this method set new progress value
start		{this}	Start progress incrementation
stop		{this}	Stop increasing
isInProgress		{bool}	Indicate increasing status
increase	number	{this}	Increase value
done		{this}	Set progress value to 100 and any set function will animate from 0 (if animation value is true)
reset		{this}	Set progress value to 0
clear		{this}	Set progress value to 0 without animation
setAnimation	bool	{this}	Set animation value
isAnimated		{bool}	indicate animation status

Alternatives

https://github.com/PSDCoder/progress-bars https://github.com/angular-ui/bootstrap

License

is under MIT license - http://www.opensource.org/licenses/mit-license.php

Development

• npm install to install development dependencies
• gulp build to build minified demo in build
• gulp serve to start build server
• gulp test to run tests