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
}
});
});
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
}
});
});
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
}
}
});
});
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
}
}
});
});
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
}
});
});
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
}
}
});
});
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
}
}
});
});
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
}
}
});
});
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();
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
}
}
});
License
This plugin is released under GNU/GPL license and is complitly free!