Page &Header Loaders

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

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

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

Preview Page Loader