Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/entrecode/angular-state-loader

Loading Spinner for UI Router (AngularJS) that is shown while loading a state's promises resolve. Can be restricted to specific state transitions. Including the optional parameters force-show and delay + the possibility to show a custom loader.
https://github.com/entrecode/angular-state-loader

Last synced: 2 days ago
JSON representation

Loading Spinner for UI Router (AngularJS) that is shown while loading a state's promises resolve. Can be restricted to specific state transitions. Including the optional parameters force-show and delay + the possibility to show a custom loader.

Awesome Lists containing this project

README 

        
# angular-state-loader

Loading Spinner for UI Router (AngularJS) that is automatically shown while loading a states resolves. Can be restricted to specific state transitions. Including the optional parameters force-show and delay + the possibility to show a custom loader.



![Demo](http://i.imgur.com/bqmrRAt.gif)



## Installation

Install angular-state-loader bower package:



```sh

npm install --save angular-state-loader

# or

bower install angular-state-loader --save

```



Add ```angular-state-loader.js``` and ```angular-state-loader.css``` dependencies to your html:



```html



```

Add Angular module ```ec.stateloader``` as dependency to your app:



```javascript

angular.module('myApp', ['ui.router', 'ec.stateloader'])

/* ... */

```



### (Optional) Material Icon Font



To use the default Loader Template, you need Material Icons which can be included via the google CDN:



```html



```

If you do not want to use material icons, always use a custom template like explained below.



## How to include



After Installing, the ``````-directive is available. 



### Basic Loader

The Basic Loader with the default templates does not require any addional parameters, just place `````` somewhere in the template where you want to show a loader. This loader wil be displayed on every state change.



### Custom Loader at runtime

If you want to have a custom loader (or do not want to use material-icons), just  make sure your ``````-tag is not empty:



```html

LOADING


```



### Change default template

If you want to change the default template for all loaders, you can use the stateLoaderProvider in your config.



You can either configure a template url with setTemplateUrl:



```javascript

angular.module('myApp', ['ui.router', 'ec.stateloader'])

    .config(function('stateLoaderProvider') {

        stateLoaderProvider.setTemplateUrl('custom.tpl.html');   

     });

```



Or a template snippet with setTemplate:



```javascript

angular.module('myApp', ['ui.router', 'ec.stateloader'])

    .config(function('stateLoaderProvider') {

        stateLoaderProvider.setTemplate('
' +

        '
LOHOHOHOHOADING!


');

     });

```



## Additional Properties



### delay

By default, the loader will show up after 100ms of loading time and will stay until all of the state's promises are resolved. This delay can be changed with the ```delay``` property (in ms):



```html

Taking longer than expected...

```

The above loader will show up if resolving the state's promises is taking longer than 10 seconds. A Value of 0 will instantly show the loader.



### force-show



The property force-show expects a boolean and will show the loader if set to true. Note that the Loader still waits for the specified delay to be shown. This is useful when resolving promises inside the controller and not via the state's resolve. 



Controller Example:



```javascript

$scope.loadData = function() {

	$scope.showLoader = true;

	loadMuffins().then(function(muffins) {

		$scope.showLoader = false;

		$scope.muffins = muffins;

	});

}

$scope.loadData();

```

Template:



```html



  • {{muffin}}
    • 

    ```

    This Loader will show up when the loadData Function is invoked. When the Promise is resolved, we can set showLoader to false to hide the loader again.
    


    ### from-state
    


    Expects a string. Restricts the loader to be shown only if coming from the given state name.
    


    ```html
    


    ```
    


    ### to-state
    


    Expects a string. Restricts the loader to be shown only if going to the given state name.
    


    ```html
    


    ```
    


    ### Full Example
    


    At last, here is a full example of how it can be used fully customized:
    


    ```html
    


    Loading incredible amount of muffins!
    


    ```
    


    The above loader will only show if transitioning from state "bakery" to state "bakery.muffins" after 500ms loading time, showing a custom message.
    


    ## CSS Classes

    The Loader is wrapped in a div with the ```.angular-state-loader``` class which is by default positioned absolute with 100% width and height. By applying ```rotate-right``` to a custom element inside ``````, it will.. guess what?
    


    ## Demo

    To run the Demo, install angular-state-loader and then run bower install inside its root folder. The index.html in the demo folder contains a small demo with different loading times (the same as the gif above).