angular-progress

angular-progress

entertaiment while loading your data

DEMO

Getting started:

Download the package from GitHub.

git clone https://github.com/codekraft-studio/angular-progress.git

Or use it from the GitHub CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/codekraft-studio/angular-progress/master/dist/angular-progress.css"/>
<script type="text/javascript" src="https://cdn.rawgit.com/codekraft-studio/angular-progress/master/dist/angular-progress.min.js"></script>

Add angular-progress to your module dependencies:

angular.module('app', ['angular-progress'])

And finally and optionally add the directive to your DOM:

<progress-bar></progress-bar>

How it works

The module has a interceptor that start automatically the progress bar when a $http request is performed. If you want to disable the progress bar on a particular request, you have to specify the property ignoreProgress like in this example:

$http.({
  method: 'GET',
  url: 'api/feeds',
  ignoreProgress: true
}).success(function(data) {
  // do stuff
})

or in the short form like this:

$http.get('api/feeds', { ignoreProgress: true })
.success(function(data) {
  // do stuff
})

Events

The event are emitted from the module itself or by using one of the Progress service methods.

• progress:start: fired when the progress starts
• progress:stop: fired when the progress stops
• progress:complete: fired when the progress is complete
• progress:reset: fired when the progress bar resets to initial state

API Methods

Include the Progress service to your controller or anywhere you want and you can use the following methods:

• start: Start the progress bar animation
• stop: Stop the progress bar animation
• reset: Stop and reset the progress bar to initial state
• complete: Set the progress bar status to the end

angular.module('app')
.controller('ProgressCtrl', function($scope, $timeout, Progress) {

  Progress.start();

  $timeout(function() {
    Progress.complete();
  }, 2000)

})