https://github.com/jfeigel/ngloader

Loading animation for AngularJS
https://github.com/jfeigel/ngloader

Last synced: 3 months ago
JSON representation

Loading animation for AngularJS

• Host: GitHub
• URL: https://github.com/jfeigel/ngloader
• Owner: jfeigel
• License: mit
• Created: 2015-03-03T02:57:42.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-09-15T15:33:40.000Z (over 8 years ago)
• Last Synced: 2024-10-03T12:44:42.085Z (3 months ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 22
• Watchers: 4
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```JavaScript

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

```

##### 3. Include the CSS file in your HTML file or import it in your CSS

```HTML

```

OR

```CSS

@import "bower_components/ngLoader/ngLoader.min.css";

```

##### 4. Include the JS file in your HTML file

```HTML

```

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

```HTML

```

## 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.

```JavaScript

$scope.working = true;

$scope.message = 'Loading...'

$http.get('').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.