quick app integration for your favourite loaders
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:
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.
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.
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:
If you have some doubt check the example or the index page inside the repository.
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.