jQuery Plugin For Animated Fullscreen Page Loader - Intro Loader

Intro Loader is a jQuery plugin that makes use of spin.js to create an animated, fullscreen loader on page load.

How to use it:

1. Load jQuery library and the jQuery Intro Loader's files in the document.

<link href="css/introLoader.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.introLoader.js"></script>

2. Load the spin.js for animated CSS3 loading spinners.

<script src="spin.min.js"></script>

3. Load the jQuery easing plugin for advanced easing effects.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

4. Create an empty element for the page loader.

<div id="demo"></div>

5. Call the plugin to create a page loader with default options.

$("#demo").introLoader();

6. Available options to customize the page loader.

$("#demo").introLoader({

animation: {
  name: 'simpleLoader',
  options: {
      
    /* Shared Options */
    /* ----------------------------- */
    exitFx:'fadeOut', //OLD -> exitFx:'fadeOut'
    ease: "linear",
    style: 'light',
    delayBefore: 500, //OLD -> delayTime: 500,
    delayAfter: 300, //OLD -> afterAnimationDelayTime: 0,
    exitTime: 300, //OLD -> animationTime: 300,
    animationTime: 300,
    
    /* "doubleLoader" animation only */
    /* ----------------------------- */
    progbarTime: 300, //OLD -> progbarAnimationTime: 300
    progbarDelayAfter: 300, 

    /* "lettersLoader animation only */
    /* ----------------------------- */
    loaderText: 'Website is Ready!',
    lettersDelayTime: 1,

    /* "Globals Options */  
    /* ----------------------------- */
    preventScroll: false,
    fixed: true,
    stop: true,
    onAfter: function(){},
    onBefore: function(){}
        
  }
}, 

// spin.js options
spinJs: {

  // The number of lines to draw
  lines: 13, 

  // The length of each line
  length: 7, 

  // The line thickness
  width: 4, 

  // The radius of the inner circle
  radius: 10, 

  // Corner roundness (0..1)
  corners: 1, 

  // The rotation offset
  rotate: 0, 

  // #rgb or #rrggbb
  color: '#000', 

  // Rounds per second
  speed: 1, 

  // Afterglow percentage
  trail: 60, 

  // Whether to render a shadow
  shadow: false, 

  // Whether to use hardware acceleration
  hwaccel: false, 

  // The CSS class to assign to the spinner
  className: 'spinner', 

  // The z-index (defaults to 2000000000)
  zIndex: 2e9, 

  // Top position relative to parent in px
  top: 'auto', 

  // Left position relative to parent in px
  left: 'auto' 
}
});

7. doubleLoader animation (without spin.js).

$(document).ready(function() {
  $("#element").introLoader({
    animation: {
      name: 'doubleLoader',
      options: {

        // Require jQueryEasing plugin
        ease: "easeInOutCirc",

	// The css animation elements style.
        style: 'light',

	// The delay time for start antimation after window load.
        delayTime: 500,

	// The animation duration time
        animationTime: 300,

	// The progressbar animation duration time
        progbarAnimationTime: 700,

	// The delay time after progressbar animation before starting exit animation.
        progbarDelayAfter: 400
      }
    }
  });
});

8. lettersLoader animation (without spin.js).

$(document).ready(function() {
  $("#element").introLoader({
    animation: {
     name: 'lettersLoader',
     options: {
      ease: "easeInOutCirc",
      style: 'light',
      delayTime: 500,
      animationTime: 300,
      loaderText: 'Page ready!',
      lettersDelayTime: 0
     }
    },
    spinJs: {// spin.js options}
  }); 
});

Change logs:

v1.7.1 (2015-11-21)

• css bug fixed on cssLoader animation
• cssLoader animation added

v1.6.2 (2015-05-16)

• Some little changes on demo files

v1.6.1 (2015-05-16)

• Helper plugin "SpinJs" updated to version 2.1.0

v1.6.0 (2015-04-04)

• New "gifLoader" Animation added

v1.5.0 (2015-03-02)

• New "counterLoader" animation added;
• Default exit effect optimized to prevent user errors during typing;
• "delayAfter" default value changed to 0;
• CSS properties changed for "preventScroll" option

v1.4.5 (2015-03-01)

• Exit effects added on "letterLoader" animation.

v1.4.4 (2015-02-27)

• some javascript changes

v1.4.3 (2015-02-25)

• onAfter function bug fixed on "lettersLoader" animation.

v1.4.2 (2015-02-22)

• Some javascript bugs fixed.
• z-index css property setted on value 9999.

v1.4.0 (2015-02-19)

• Some option names was changed. 

v1.3.9 (2015-02-17)

• added .destroy() method.

v1.3.8 (2015-01-24)

• Body class assignment bug fixed.

v1.3.6 (2015-01-23)

• "preventScroll" bug on iOS solved.

v1.3.5 (2015-01-10)

• New "preventScroll" option added to animation options group

v1.3.3 (2015-01-09)

• Some CSS bug solved.

v1.3.2 (2015-01-05)

• New styles ("ocean" and "forest") added for all animations
• New substyles "zebra" added for "doubleLoader" animation only.
• LESS file added to the project
• Some Javascript changes 

v1.3.0 (2015-01-04)

• New animation "lettersLoader" added.

v1.2.0 (2015-01-03)

• New animation "doubleLoader" added.

v1.1.3 (2014-12-16)

• white colored background added to the loader

v1.1.2 (2014-12-15)

• CSS classes name changed
• Spinner ID changed
• Stylesheet cleaned

v1.1.0 (2014-12-14)

• update.

---

This awesome jQuery plugin is developed by Gix075. For more Advanced Usages, please check the demo page or visit the official website.