JarCastingngLoader
Loading animation for AngularJS
Used the SVG loading animations from this Pen by Aurer.
This module can be used in any version of Angular (see the Plunk below). All major browsers, except IE, are supported. Template 9, the default and now using CSS animations, is supported in IE10+ and the other templates are not supported in IE.
1. Install the module via bower.
bower install ng-loaders
2. Add the module as a dependency
angular.module('app',['ngLoader']);
3. Include the CSS file in your HTML file or import it in your CSS
<link rel="stylesheet" href="/bower_components/ngLoader/ngLoader.min.css">
OR
@import "bower_components/ngLoader/ngLoader.min.css";
4. Include the JS file in your HTML file
<script src="bower_components/ngLoader/ngLoader.min.js"></script>
5. Add the loader in your view and ensure the corresponding scope variable is defined
<loader
working="scopeWorkingVariable"
disable-background="true"
message="scopeMessageVariable"
template="9">
</loader>
Example
This loader can be used in many instances, one in which being for AJAX requests using Anuglar's $http service. Set your scope variable to true before the request and in the finally condition of the promised returned.
Example plunk can be found here.
$scope.working = true;
$scope.message = 'Loading...'
$http.get('<api endpoint>').then(
function(success) {
console.log('Success! ' + success);
},
function(error) {
console.error('Error! ' + error);
}
)['finally'](function() {
$scope.working = false;
});
Options
Only the working attribute is required.
| Attribute | Default | Accepted Values |
|---|---|---|
| working | name of scope variable | Any valid scope variable |
| disable-background | false | true or false |
| message | undefined | Any string |
| template | 9 | Any number 1-9 |
Notes
Styles of the loader can be updated / modified by targeting the loader-content class.