Angular Loading

Angular directive that lets you to prevent user interaction with part of the page and display loading/busy indicator (spinner based on spin.js)

Demo:http://embed.plnkr.co/XLL3li/preview

Installation

Using bower:

$ bower install angular-loading --save

Using git:

$ git clone https://github.com/darthwade/angular-loading.git

Requirements & Dependencies

• Angular
• Spin.js

Usage

Add angular-loading.min.js and angular-loading.css to your HTML. Also add spin.js library.

<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script><scriptsrc="//rawgithub.com/darthwade/angular-loading/master/angular-loading.min.js"></script><linkrel="stylesheet" type="text/css" href="//rawgithub.com/darthwade/angular-loading/master/angular-loading.css"/>

Add darthwade.loading as a module dependency for your app.

angular.module('myApp',['darthwade.loading']);

Add dw-loading directive to that block which you want to lock during loading.

<divdw-loading="key" dw-loading-options="options"></div>

Example

<divdw-loading="users" dw-loading-options="{text: 'Loading users...'}" class="users-list"><png-repeat="user in users">{{user.name}}</p></div>

functionSampleCtrl($scope,$loading){$scope.loadUsers=function(){// Lock UI and show spinner$loading.start('users');$http({method: 'GET',url: '/someUrl'}).success(function(data,status,headers,config){$scope.users=data;// Unlock UI and hide spinner$loading.finish('users');});};$scope.loadUsers();}

Options

{active: false,// Defines current loading statetext: 'Loading...',// Display textclassName: '',// Custom class, added to directiveoverlay: true,// Display overlayspinner: true,// Display spinnerspinnerOptions: {lines: 12,// The number of lines to drawlength: 7,// The length of each linewidth: 4,// The line thicknessradius: 10,// The radius of the inner circlerotate: 0,// Rotation offsetcorners: 1,// Roundness (0..1)color: '#000',// #rgb or #rrggbbdirection: 1,// 1: clockwise, -1: counterclockwisespeed: 2,// Rounds per secondtrail: 100,// Afterglow percentageopacity: 1/4,// Opacity of the linesfps: 20,// Frames per second when using setTimeout()zIndex: 2e9,// Use a high z-index by defaultclassName: 'dw-spinner',// CSS class to assign to the elementtop: 'auto',// Center verticallyleft: 'auto',// Center horizontallyposition: 'relative'// Element position}}

API

$loading.setDefaultOptions(options) - Overrides default options.

$loading.start(key) - Activates loading state by key.

$loading.finish(key) - Deactivates loading state by key.

Events

$loadingStart - Fired once the loading is started. The '$rootScope' emits the event.

$scope.$on('$loadingStart',function(event,key){ ... });

$loadingFinish - Fired once the loading is finished. The '$rootScope' emits the event.

$scope.$on('$loadingFinish',function(event,key){ ... });

Styling

<divdw-loading="key" dw-loading-options="{className: 'custom-loading', spinnerOptions: {className: 'custom-spinner'}}" class="my-block"><p>Content</p></div>

Will generate:

<divdw-loading="key" dw-loading-options="{active: true, text: 'Please Wait...', className: 'custom-loading', spinnerOptions: {className: 'custom-spinner'}}" class="my-block"><p>Content</p><divclass="dw-loading dw-loading-overlay dw-loading-active custom-loading"><divclass="dw-loading-body"><divclass="dw-loading-spinner"><divclass="custom-spinner"></div></div><divclass="dw-loading-text">Please Wait...</div></div></div></div>

Testing

$ git clone https://github.com/darthwade/angular-loading.git
$ cd angular-loading
$ vagrant up

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests and examples for any new or changed functionality.

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

License

Licensed under the MIT License. See the LICENSE file for details.

Copyright (c) 2014 Vadym Petrychenko