jqueryIntroLoader Plugin
a jQuery plugin for generate animated intro loading pages

Documentation

This is the official documentation. Here you can find all plugin options and methods

Installation

Install and use jqueryIntroLoader is simple.
Just follow some easy steps and you will be ready to load your intro animation.

Include CSS

Include the plugin css file on your page HEAD

<link rel="stylesheet" href="path/to/plugin/css/introLoader.min.css">

Include jQuery and jqueryIntroLoader

Include jQuery and jqueryIntroLoader on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="path/to/plugin/js/jquery.introLoader.pack.min.js"></script>

Helpers

jqueryIntroLoader need two external plugin: jQueryEasing and SpinJS
You can load it separately or simply including jquery.introLoader.pack.min.js (as shown on the box above)

HTML Markup

Add an empty div without any css style, best is after body opening, and assign it an univocal id.
For a better introloader view assign class="introLoading" to the element.

<div id="element" class="introLoading"></div>

Javascript

Place the following lines on your page to initialize plugin with default settings.

$(document).ready(function() {
    $("#element").introLoader();
});

Plugin Options

Plugin Options are diveded in two group (each group is an opions object):
animation and spinJs

SpinJS Options
SpinJS options can be setted in the following way.
This options are the same of SpinJS native options, and you can configure it on SpinJs Website
Warning: you can alwais configure this options but not all animations use SpinJs

$(document).ready(function() {
    $("#element").introLoader({
        spinJs: {

            lines: 13, // The number of lines to draw
            length: 20, // The length of each line
            width: 10, // The line thickness
            radius: 30, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            color: '#000', // #rgb or #rrggbb or array of colors
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            shadow: false // Whether to render a shadow

        }
    });
});
Animation Options
This option groups is different for each animation, so see the chapter "Animations" to learn about each animation options and allowed values .

Animations

The following list explains all of active animations. For each animation you can find all allowed options and values.

Ease Option:
this option allow all easing properties, but be sure to have included in your page the jQueryEasing plugin.
(included in jquery.introLoader.pack.min.js)

Shared Options

The following options table shows the options availables for all animations.

Option Type Allowed Values Description
name [STRING] Any valid animation name DEFAULT: simpleLoader
This is the animation name
stop [BOOL] true/false DEFAULT: true
This option, if setted on false, block the loader open. To colose loader you will need to use data method .stop()
Option available from version 1.1.0
fixed [BOOL] true/false DEFAULT: true
This option, if setted on false, change the loader from position:fixed to position:absolute. This option is needed if you want to charge the loader inside a div, as an ajax loader.
Option available from version 1.1.0
preventScroll [BOOL] true/false DEFAULT: false
This option, if setted on true, add the "overflow:hidden" css rule to the body element during animation. The overfolw property will set to "overflow:auto" when animation is ended.
Option available from version 1.3.5
onBefore [function()] Any function DEFAULT: none
This is a function that will be executed before plugin animation.
onAfter [function()] Any function DEFAULT: none
This is a function that will be executed after plugin animation.

simpleLoader

Simple default animation, with a big fixed div positioned over the body with a spin inside.
This animation has 5 possible movements and 5 color style that you can customize.
This animation use SpinJS.

Directions: slideUp, slideRight, slideDown, slideLeft, fadeOut
Use spinJS: yes

Option Type Allowed Values Description
name [STRING] simpleLoader This is the animation name
exitFx [STRING] fadeOut, slideUp, slideDown, slideRight, slideLeft This is the main animation exit effect
ease [STRING] Any Valid Ease This is the animation easing. Require jQueryEasing plugin
style [STRING] light, dark, ocean, forest, fluoGreen, fluoMagenta, fluoYellow This is the css animation elements style.
delayBefore [INT] Any INT This is the delay time for start antimation after window load.
Time in milliseconds.
exitTime [INT] Any INT This is the animation duration time.
Time in milliseconds

Code Example

$(document).ready(function() {
    $("#element").introLoader({
        animation: {
            name: 'simpleLoader',
            options: {
                exitFx:'slideUp',
                ease: "easeInOutCirc",
                style: 'dark',
                delayBefore: 1000,
                exitTime: 500
            }
        },    

        spinJs: {
            lines: 13, // The number of lines to draw
            length: 20, // The length of each line
            width: 10, // The line thickness
            radius: 30, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            color: '#fff', // #rgb or #rrggbb or array of colors
        }
    });
});

Animation Demo

cssLoader

Simple css animation, with a big fixed div positioned over the body with a css spinner inside.
This animation has 5 possible movements and 5 color style that you can customize.
This animation use only a CSS spinner.

Directions: slideUp, slideRight, slideDown, slideLeft, fadeOut
Use spinJS: no

Option Type Allowed Values Description
name [STRING] cssLoader This is the animation name
exitFx [STRING] fadeOut, slideUp, slideDown, slideRight, slideLeft This is the main animation exit effect
ease [STRING] Any Valid Ease This is the animation easing. Require jQueryEasing plugin
style [STRING] light, dark, ocean, forest, fluoGreen, fluoMagenta, fluoYellow This is the css animation elements style.
You can use also some optional classes for circle sizes: medium, large, half-circle
delayBefore [INT] Any INT This is the delay time for start antimation after window load.
Time in milliseconds.
exitTime [INT] Any INT This is the animation duration time.
Time in milliseconds

Code Example

$(document).ready(function() {
    $("#element").introLoader({
        animation: {
            name: 'cssLoader',
            options: {
                exitFx:'slideUp',
                ease: "easeInOutCirc",
                style: 'dark',
                delayBefore: 1000,
                exitTime: 500
            }
        }
    });
});

Animation Demo

doubleLoader

Animation with two horizontal divs and a progressbar at page middle. After progressbar animation (from width 0 to 100%) the two divs disappera sliding to top and bottom.

Use spinJS: no

Option Type Allowed Values Description
name [STRING] doubleLoader This is the animation name
ease [STRING] Any Valid Ease DEFAULT: linear
This is the animation easing. Require jQueryEasing plugin
style [STRING] light, dark, ocean, forest, fluoGreen, fluoMagenta, fluoYellow This is the css animation elements style.
delayBefore [INT] Any INT DEFAULT: 500
This is the delay time for start antimation after window load.
Time in milliseconds.
exitTime [INT] Any INT DEFAULT: 300
This is the animation duration time.
Time in milliseconds
progbarTime [INT] Any INT DEFAULT: 300
This is the progressbar animation duration time.
Time in milliseconds
progbarDelayAfter [INT] Any INT DEFAULT: 300
This is the delay time after progressbar animation before starting exit animation.
Time in milliseconds

Code Example

$(document).ready(function() {
    $("#element").introLoader({
        animation: {
            name: 'doubleLoader',
            options: {
                ease: "easeInOutCirc",
                style: 'light',
                delayBefore: 500,
                exitTime: 300,
                progbarTime: 700,
                progbarDelayAfter: 400
            }
        }
    });
});

Animation Demo

lettersLoader

Text string with a progressive letters opacity animation.
This animation use SpinJS.
This animation allows you to use all exit effects allowed by simpleLoader animation.

Use spinJS: yes

Option Type Allowed Values Description
name [STRING] lettersLoader This is the animation name
exitFx [STRING] fadeOut, slideUp, slideDown, slideRight, slideLeft This is the main animation exit effect
ease [STRING] Any Valid Ease DEFAULT: linear
This is the animation easing. Require jQueryEasing plugin
style [STRING] light, dark, ocean, forest, fluoGreen, fluoMagenta, fluoYellow This is the css animation elements style.
loaderText [STRING] Any string DEFAULT: Website is ready!
This is the text that will appear on screen
delayBefore [INT] Any INT DEFAULT: 500
This is the delay time for start antimation after window load.
Time in milliseconds.
animationTime [INT] Any INT DEFAULT: 300
This is the animation duration time. Time for each letter
Time in milliseconds
lettersDelayTime [INT] Any INT DEFAULT: 1
This is the delay time after each letter animation
exitTime [INT] Any INT DEFAULT: 300
This is the exit effects duration time.
Time in milliseconds
delayAfter [INT] Any INT DEFAULT: 0
This is the delay time after letters animation

Code Example

$(document).ready(function() {
    $("#element").introLoader({
        animation: {
            name: 'lettersLoader',
            options: {
                ease: "easeInOutCirc",
                style: 'light',
                delayBefore: 500,
                exitTime: 300,
                loaderText: 'Page ready!', 
                lettersDelayTime: 0
            }
        },    

        spinJs: {
            lines: 13, // The number of lines to draw
            length: 20, // The length of each line
            width: 10, // The line thickness
            radius: 30, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            color: '#fff', // #rgb or #rrggbb or array of colors
        }
    });
});

Animation Demo

counterLoader

Fake loading percentage counter. This animation shows a progessive count from 0 to 100%.
This animation has 5 possible exit effects and 5 color style that you can customize.

Directions: slideUp, slideRight, slideDown, slideLeft, fadeOut
Use spinJS: no

Option Type Allowed Values Description
name [STRING] counterLoader This is the animation name
exitFx [STRING] fadeOut, slideUp, slideDown, slideRight, slideLeft This is the main animation exit effect
ease [STRING] Any Valid Ease This is the animation easing. Require jQueryEasing plugin
style [STRING] light, dark, ocean, forest, fluoGreen, fluoMagenta, fluoYellow This is the css animation elements style.
delayBefore [INT] Any INT This is the delay time for start antimation after window load.
Time in milliseconds.
delayAfter [INT] Any INT This is the delay time for start exit effect after loader animation.
Time in milliseconds.
animationTime [INT] Any INT This is the animation duration time for loader main animation
Time in milliseconds.
exitTime [INT] Any INT This is the animation duration time.
Time in milliseconds

Code Example

Simple Usage

$(document).ready(function() {
    $("#element").introLoader({
        animation: {
            name: 'counterLoader',
            options: {
                ease: "easeOutSine",
                style: 'fluoGreen',
                animationTime: 1000
            }
        }
    });
});

Animation Demo

gifLoader

GifLoader. This animation consists in a simple div with a gif as loader charged on center of the page.
This animation has 5 possible exit effects and 10 color style that you can customize.
You can also load a custom gif and choose a custom background color from plugin options.

Directions: slideUp, slideRight, slideDown, slideLeft, fadeOut
Use spinJS: no

Option Type Allowed Values Description
name [STRING] counterLoader This is the animation name
exitFx [STRING] fadeOut, slideUp, slideDown, slideRight, slideLeft This is the main animation exit effect
ease [STRING] Any Valid Ease This is the animation easing. Require jQueryEasing plugin
style [STRING] light, dark, ocean, forest, fluoGreen, fluoMagenta, fluoYellow, "light bubble", "dark bubble", "ocean bubble", "forest bubble", "fluoGreen bubble", "fluoMagenta bubble", "fluoYellow bubble" This is the css animation elements style.
delayBefore [INT] Any INT This is the delay time for start antimation after window load.
Time in milliseconds.
delayAfter [INT] Any INT This is the delay time for start exit effect after loader animation.
Time in milliseconds.
animationTime [INT] Any INT This is the animation duration time for loader main animation
Time in milliseconds.
exitTime [INT] Any INT This is the animation duration time.
Time in milliseconds
customGif [STRING] Any string This is the url of your custom gif
Url mus be relative to the html page.
customGifBgColor [STRING] Any STRING This is the custom background color.
Insert an HEX value as #000 or RGB or RGBA or a websafe.

Code Example

Simple Usage

$(document).on('ready', function() {
    $("#element").introLoader({
        animation: {
            name: 'gifLoader',
            options: {
                ease: "easeInOutCirc",
                style: 'light',
                delayBefore: 500,
                delayAfter: 0,
                exitTime: 300
            }
        }
    });
});

Animation Demo

Option Migration Table

After 1.4.0 version some animation option names are changed.
To help your migration to the new names we provide a table with all changes.

OLD Option Name NEW Option Name
effect exitFx
delayTime delayBefore
afterAnimationDelayTime delayBefore
animationTime
(This option is now used for another function.
See below!)
exitTime
progbarAnimationTime progbarTime

Warning!

animationTime is now used to indicate the animation time like the single letters fadeIn in "lettersLoader" animation

Styles & Colors

We provide some different styles based on colors. Here you can see an example of color palettes.

Light {style: 'light'}

Dark {style: 'dark'}

Ocean {style: 'ocean'}

Forest {style: 'forest'}

FluoGreen {style: 'fluoGreen'}

FluoMagenta {style: 'fluoMagenta'}

FluoYellow {style: 'fluoYellow'}

Prevent Scroll

To prevent window scroll during animation (appling "overflow:hidden" css property to the body element), you can use the global animation option:
preventScroll: true
Option added from version 1.3.5 - Default value is false

$(document).ready(function() {
    $("#element").introLoader({
        animation: {
            name: 'animationName',
            options: {
                preventScroll: true/false
            }
        }
    });
});
See an example of preventScroll

Data Methods

Start/Stop Plugin Manually

From version 1.1.0 is possible to start and stop plugin in two separate events.
This option is useful if you want use this plugin to charge loader inside an ajax call or in other situations.
To use this feature simply initialize plugin with this option inside animation options:

$('#element').introLoader({
    animation: {
        name: "animationName",
        options: {
            stop: false
        }
    }
});

To stop plugin then use this code:

    var loader = $('#element').data('introLoader');
        loader.stop();
    
See an example of start/stop use

Destroy

From version 1.3.9 you cant use .destroy() method.

    var loader = $('#element').data('introLoader');
        loader.destroy();
    

Remove fixed position

If you are using this plugin to charge a loader inside a inner page div (with stop option to false), probably you need to remove fixed position and add absolute position.
To do this, simply use this animation option:

$('#element').introLoader({
    animation: {
        name: "animationName",
        options: {
            stop: false,
            fixed: false
        }
    }
});
See an example of absolute positioning

License

This plugin is released under GNU/GPL license and is complitly free!

ForkMe on GitHub

If you like this project, fork or star it on GitHub page