Header Loader
You can use the layout API to start the header loader and stop it on demand. It is better to be used when the header is also set to fixed, so it is always visible.
Start
Starting the header loader is very easy and you can either do it on button click or from JS code
Button Based
<button type="button" class="btn btn-success" data-toggle="layout" data-action="header_loader_on">Start Header Loader</button>
JS Code
Dashmix.layout('header_loader_on');
Stop
The same applies for stoping it as well, it is very straightforward to use it
Button Based
<button type="button" class="btn btn-danger" data-toggle="layout" data-action="header_loader_off">Stop Header Loader</button>
JS Code
Dashmix.layout('header_loader_off');
Page Loader
Usage
Using the Page Loader is very simple
You can add the following markup after the body tag and the loading screen will be enabled and auto hide once the page loads (you can add a .bg-* class for a custom background color): <div id="page-loader" class="show"></div>
You can also show or hide the loading screen at any time by using Dashmix.loader('show') or Dashmix.loader('hide') respectively. If you like to add a custom background color, you can dynamically add a .bg-* class to your page loader, for example Dashmix.loader('show', 'bg-danger')