Loaders
Show a loader for any page or custom activity.
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.
| Live | JS | Button Attributes |
|---|---|---|
|
Starting the header loader is very easy and you can either do it on button click or from JS code |
One.layout('header_loader_on');
|
data-toggle="layout" data-action="header_loader_on"
|
|
The same applies for stoping it as well, it is very straightforward to use it |
One.layout('header_loader_off');
|
data-toggle="layout" data-action="header_loader_off"
|
Page Loader
You can add the following markup after #page-container div and the loading screen will be enabled and auto hide once the page loads:
<div id="page-loader" class="show"></div>
You can preview the page loader by clicking the following button:
| Mode | JS |
|---|---|
|
Showing the page header |
One.loader('show')
|
|
Hiding the page header |
One.loader('hide')
|