1.0.1 • Published 8 years ago
angular-progress v1.0.1
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)
})
1.0.1
8 years ago