Page & Header Loaders

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.


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



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


Page Loader


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')


Have a look at Page Loader in action