HTML needed for loader:
The loader itself:
<div id="loader-one" class="loader-container" style="display: none;">
<div class="loader"></div>
</div>
A sample button to activate it:
<button class="btn btn-primary compare-submit">Toggle Loader</button>
A sample button logic that uses a global tekFn object:
// == Event Listener ==
$('button.compare-submit').on("click", showHideLoader);
// == Actions ===
function showHideLoader() {
var $loader = $('#loader-one');
(!$loader.hasClass('active')) ?
window.tekFn.loader('show','#loader-one')+$loader.addClass('active') :
window.tekFn.loader('hide','#loader-one')+$loader.removeClass('active');
}
Loader JS usage
PatternLab does now allow support for 'window' variable, so when this function is to be used on Sitecore it should be used as:
window.tekFn.loader(...)
without underscore unlike how it is in Source Code of this page.
Click the buttons below to add or remove loaders to assigned DIVs.
How to use JS method of adding a loader:
window.tekFn.loader('appendTo','.example--container-div-multiple');
window.tekFn.loader('remove', '.example--container-div-multiple .loader-container');