ngLoader

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.