jQuery.loader plugin integration with Meteor

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/

Usage

Basic

First of all, include jquery.loader.js (1.526 kb), jquery.loader.min.css (1.135 kb) and loader.gif (3.866 kb) in your HTML then start to use jQuery.loader.

1$(document).ready(function() {
2    $('body').loader('show');
3
4    Meteor.setTimeout(function () {
5
6        $('body').loader('hide');
7
8    }, 2000);
9});

Options

1{
2    className: 'loader',
3
4    tpl: '<div class="{className} hide"><div class="{className}-load"></div><div class="{className}-overlay"></div></div>',
5
6    delay: 200,
7    loader: true,       // if true, you can hide the loader by clicking on it
8    overlay: true,      // display or not the overlay
9
10    // Callback
11    onHide: function () {},
12    onShow: function () {}
13}

Methods

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

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

1$('body').load('show', {
2    onHide: function () {
3        // do something...
4    }
5});
6

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

Hide the loader

1$('body').loader('hide');
2

Browsers: Tested and Working In

• IE 6, 7, 8, 9, 10
• Firefox 3+
• Opera 10+
• Safari 4+