angular-page-loader
quick app integration for your favourite loaders
DEMO
Getting started
Download it via github or via npm:
npm install angular-page-loader
Or use it directly from the GitHub CDN:
Add the module name to your application dependencies:
angular
And optionally add the module directive to your page DOM, inside the body:
Anyway is a best practice to add in your page head, as descripted in the Angular documentation, the following style:
[
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:
And in your application:
angular
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 on codepen and it was taken from here.
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.
<!-- some examples -->
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.