ngLoader

Loading animation for AngularJS
1 person uses it
Author: 4389385?v=3 jfeigel

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.

1. Install the module via bower.

bower install ng-loaders

2. Add the module as a dependency

angular.module('app',['ngLoader']);

3. Include the file in your html file

<script src="bower_components/ngLoader/ngLoader.min.js"></script>

4. Add the loader in your view and ensure the corresponding scope variable is defined

<loader

    working="scopeVariable"

    disable-background="true"

    message="Loading..."

    template="1">

</loader>

Example

This loader can be used in many instances, one in which being for AJAX requests using Anuglar's $http service: https://docs.angularjs.org/api/ng/service/$http. Set your scope variable to true before the request and in the finally condition of the promised returned.

Example plunk can be found here: http://plnkr.co/edit/IooEvgf5azTAzDULLLEJ?p=preview

$scope.working = true;

$http.get('').then(

    function(success) {

        console.log('Success! ' + success);

    },

    function(error) {

        console.error('Error! ' + error);

    }

)finally {

    $scope.working = false;

});

Options

Only the working attribute is required.

working name of scope variable Any valid scope variable

disable-background false true or false

message undefined Any string

template 1 Any number 1-8

comments powered by Disqus
This page was last updated almost 3 years ago.