Display a loader on your page or HTML block element.

View the Project on GitHub monkeymonk/jquery.loader.js

jQuery.loader Plugin - v 1.0

Display a loader on your page or HTML block element.

Project site: http://monkeymonk.github.com/jquery.loader.js/

Demo: http://monkeymonk.be/jquery.loader.js/demo/



First of all, include jquery.loader.js, jquery.loader.css and loader.gif in your HTML then start to use jQuery.loader.

$(document).ready(function() {

    setTimeout(function () {


    }, 2000);


    className: 'loader',

    tpl: '<div class="{className} hide"><div class="{className}-load"></div><div class="{className}-overlay"></div></div>',

    delay: 200,
    loader: true,       // if true, you can hide the loader by clicking on it
    overlay: true,      // display or not the overlay

    // Callback
    onHide: function () {},
    onShow: function () {}


jQuery().loader('show', options);

jQuery.loader use a tiny template system that let you an easy way to customize your loader.

$('body').load('show', {
    onHide: function () {
        // do something...

jQuery().loader('hide', onHide);

Hide the loader


Browsers: Tested and Working In