https://github.com/codekraft-studio/angular-page-loader
quick app integration for your favourite loaders
https://github.com/codekraft-studio/angular-page-loader
angular ngroute page-loader ui-router
Last synced: 4 months ago
JSON representation
quick app integration for your favourite loaders
- Host: GitHub
- URL: https://github.com/codekraft-studio/angular-page-loader
- Owner: codekraft-studio
- Archived: true
- Created: 2016-03-31T08:18:20.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-19T11:54:40.000Z (over 6 years ago)
- Last Synced: 2025-01-10T15:48:34.942Z (4 months ago)
- Topics: angular, ngroute, page-loader, ui-router
- Language: HTML
- Homepage: http://www.codekraft.it/demos/angular-page-loader/
- Size: 269 KB
- Stars: 13
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-page-loader
quick app integration for your favourite loaders
### [DEMO](http://www.codekraft.it/demos/angular-page-loader/)
### Getting started
Download it via github, npm or via bower:
```bash
npm install angular-page-loader
bower install --save angular-page-loader
```
Or use it directly from the GitHub CDN:
```html
```
Add the module name to your application dependencies:
```javascript
angular.module('app', ['angular-page-loader'])
```
And optionally add the module directive to your page DOM, inside the body:
```html
```
Anyway is a best practice to add in your page **head**, as descripted in the Angular documentation, the following style:
```css
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
```
To hide all the Angular elements that have **ng-cloack** attribute until the app is loaded, in our case in better to add ng-cloak to the whole body element.
---
### Basic usage
##### with ngRoute:
If you **are using** Angular Routes (ngRoute), add the **page-loader** directive and you are ready to go, reload your application and you will see the loader on pages that takes more than **250ms** to load.
##### with ui.router:
If you **are using** ui.router, simply add the **page-loader** directive and you are ready to go.
##### without ngRoute or ui.router:
If you **are NOT using** Angular Routes (ngRoute) or ui.router you must add a **flag** attribute to the element in order to be able to determine when you want to hide the loader, otherwise it will not show.
Follow this example:
```html
```
And in your application:
```javascript
angular.module('app')
.run(function($timeout, $rootScope) {
// Use a root scope flag to access everywhere in your app
$rootScope.isLoading = true;
// simulate long page loading
$timeout(function() {
// turn "off" the flag
$rootScope.isLoading = false;
}, 3000)
})
```
If you have some doubt check the example or the index page inside the repository.
---
### Examples
##### How to use a custom loader?
You can use any loader you prefer in the module simply by adding it inside the directive element, like in this example:
**Note:** the loader used in this example is made by [_massimo](http://codepen.io/_massimo/) on codepen and it was taken from [here](http://codepen.io/_massimo/pen/JXELvz).
```html
```
**Obviously** you need to add the related loader CSS style too.
##### How to change the page-loader background?
If you want to specify a custom background color for the page-loader, add the attribute **bg-color** and pass to it a HEX,RGB or RGBA color code or just a normal color string, like you will do in css.
```html
```
##### How to change the page-loader latency time?
You can also customize the loader latency using the **latency** attribute, the value is expressed in milliseconds.
```html
```