Loaders

It is possible to specify both locally and globally a loader to be used. Use loader: loader for specifying a loader for a page and pager.loader = function(page, element) { ... } for specifying a default-loader for all pages. The loader-method should return an object with 2 methods: load and unload.

Load Sabrepulse
<div data-bind="page: {id: 'Sabrepulse', title: 'Sabrepulse', loader: spinnerLoader, sourceOnShow: 'https://embed.spotify.com/?uri=spotify:album:43tqiFDcU8JcMVSYj6NTi3'}">
    <iframe  width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</div>        
    

where

spinnerLoader: function(page, element) {
    var loader = {};
    var txt = $('<img src="ajax-loader.gif"/>');
    loader.load = function () {
        $(element).empty();
        $(element).append(txt);
    };
    loader.unload = function () {
        txt.remove();
    };
    return loader;
}

Here is an example where the load method never returns (so we can see the spinner). Open eternal spinner.