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

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.

• 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

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

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'])

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;
}

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");

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.

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

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

• 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