jQPreloaders

A jQuery plugin to create preloaders

JQPreloaders is a collection of preloaders for any web content and is powered by jQuery and CSS. Refer to the Test folder for the list of usable preloaders.

How it works

› Requirements

You need jQuery to run JQPreloaders. Add this code to your web page:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

› HTML

To add a preloader to your page, add the following HTML code after the '<body>' tag:

<div id="jQPreloader"></div>

› Javascript

To start a preloader, add the following Javascript code inside the '<script>' tag:

$(window).load(function() {
    $('#jQPreloader').jQPreloaders(type, settings);
}

› [WIP] Options

The settings you can change are:

{
    dimension: 10 // default 50
}

Examples

Angular_01

HTML

<div id="preloader" ></div>

$('#preloader').jQPreloaders('angular_01');

Angular_02

HTML

<div id="preloader" ></div>

$('#preloader').jQPreloaders('angular_02');

Angular_03

HTML

<div id="preloader" ></div>

$('#preloader').jQPreloaders('angular_03', {dimension: 15});

Square_01

HTML

<div id="preloader" ></div>

$('#preloader').jQPreloaders('square_01', {dimension: 10});

Square_02

HTML

<div id="preloader" ></div>

$('#preloader').jQPreloaders('square_02', {dimension: 10});

Square_03

HTML

<div id="preloader" ></div>

$('#preloader').jQPreloaders('square_03', {dimension: 25});

Square_04

HTML

<div id="preloader" ></div>

$('#preloader').jQPreloaders('square_04', {dimension: 25});

Square_05

HTML

<div id="preloader" ></div>

$('#preloader').jQPreloaders('square_05', {dimension: 10});