JS Tutorial
- Overview
- Documents
jqueryIntroLoader is a jQuery plugin for generate animated Intro Loading Pages
This plugin help jquery beginners to add some cool animated intro page on a website.
This plugin is very easy to install and use.
Why use it?
- It's cool!
- It's responsive!
- It's useful!
- It's light!
- It's simple to use!
- You don't need to know jQuery to obtain cool animations!
- It's perfect for jQuery beginners!
Source: factory.brainleaf.eu
1. INCLUDE CSS AND JS FILES
<!-- CSS --> <link href="path/to/css/introLoader.min.css" rel="stylesheet"> <!-- PLUGIN (with helper plugins included) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="../dist/helpers/jquery.easing.1.3.js"></script> <script src="../dist/helpers/spin.min.js"></script> <script src="path/to/plugin/jquery.introLoader.pack.min.js"></script>
2. HTML
<div id="element" class="introLoading"></div>
3. JAVASCRIPT
$(document).ready(function() {
$('#element').introLoader();
});
4. 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 |
| effect | [STRING] | fadeOut, slideUp, slideDown, slideRight, slideLeft | This is the main animation 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. |
| delayTime | [INT] | Any INT |
This is the delay time for start antimation after window load. Time in milliseconds. |
| animationTime | [INT] | Any INT |
This is the animation duration time. Time in milliseconds |
Code Example
$(document).ready(function() {
$("#element").introLoader({
animation: {
name: 'simpleLoader',
options: {
effect:'slideUp',
ease: "easeInOutCirc",
style: 'dark',
delayTime: 1000,
animationTime: 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
}
});
});
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. |
| delayTime | [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 in milliseconds |
| progbarAnimationTime | [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',
delayTime: 500,
animationTime: 300,
progbarAnimationTime: 700,
progbarDelayAfter: 400
}
}
});
});
lettersLoader
Text string with a progressive letters opacity animation.
This animation use SpinJS.
Use spinJS: yes
| Option | Type | Allowed Values | Description |
| name | [STRING] | lettersLoader | 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. |
| delayTime | [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 |
| loaderText | [STRING] | Any string |
DEFAULT: Website is ready! This is the text that will appear on screen |
| lettersDelayTime | [INT] | Any INT |
DEFAULT: 1 This is the delay time after each letter animation |
| afterAnimationDelayTime | [INT] | Any INT |
DEFAULT: 0 This is the delay time after letters animation |
$(document).ready(function() {
$("#element").introLoader({
animation: {
name: 'lettersLoader',
options: {
ease: "easeInOutCirc",
style: 'light',
delayTime: 500,
animationTime: 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
}
});
});
5. METHODS
Start/Stop Plugin Manually
From version 1.1.0 is possible to start and stop plugin in two separate events.
To stop plugin then use this code:
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.
Start/Stop Plugin Manually
From version 1.1.0 is possible to start and stop plugin in two separate events.
To stop plugin then use this code:
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.
6. PREVENT SCROLL
To prevent window scroll during animation (appling "overflow:hidden" css property to the body element), you can use the global animation option:
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
}
}
});
var loader = $('#element').data('introLoader');
loader.stop();
To do this, simply use this animation option:
$('#element').introLoader({
animation: {
name: "animationName",
options: {
stop: false,
fixed: false
}
}
});
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
}
}
});
var loader = $('#element').data('introLoader');
loader.stop();
To do this, simply use this animation option:
$('#element').introLoader({
animation: {
name: "animationName",
options: {
stop: false,
fixed: false
}
}
});
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
}
}
});
});
