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. You can start or stop the header loader with JavaScript at any time by using Codebase.layout('header_loader_on') or Codebase.layout('header_loader_off') respectively.

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 Codebase.loader('show') or Codebase.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 Codebase.loader('show', 'bg-gd-leaf')

Preview Page Loader

You can create a loading indicator by adding the class fa-spin to any Font Awesome icon. Combining it with size classes and colors, you can get a lot of variations.