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 npm
:
$ npm install angularjs-loading --save
Using bower
:
$ bower install angular-loading --save
Using git
:
$ git clone https://github.com/thelegendoflinas/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.
Add darthwade.dwLoading
as a module dependency for your app.
angular;
Add dw-loading
directive to that block which you want to lock during loading.
Example
{{user.name}}
{$scope {// Lock UI and show spinner$loadingstart'users';;};$scope;}
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;
$loadingFinish
- Fired once the loading is finished. The '$rootScope' emits the event.
$scope;
Styling
Content
Will generate:
ContentPlease Wait...
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.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
License
Licensed under the MIT License. See the LICENSE file for details.
Forked from Copyright (c) 2019 Anil Sadhu. Forked from darthwade/angular-loading