Try this jquery blockUI
customise it as well if you want
$('body').block({ message: '<div class="sk-folding-cube sk-primary"><div class="sk-cube1 sk-cube"></div><div class="sk-cube2 sk-cube"></div><div class="sk-cube4 sk-cube"></div><div class="sk-cube3 sk-cube"></div></div><h5 style="color: #444">LOADING...</h5>', css: { backgroundColor: 'transparent', border: '0', zIndex: 99999, }, overlayCSS: { backgroundColor: '#fff', opacity: 0.8, zIndex: 99999, } }); setTimeout(function(){ $('body').unblock(); },1000);
Just set it on click of anywhere you want loader