View Code? Open in Web Editor NEW

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

License: MIT License

CSS 35.22% HTML 44.25% JavaScript 20.53%

fakeloader.js's Introduction

What is fakeLoader.js

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

Check out the Demo

Bower?

Me too :) fakeLoader.js is available as a Bower package. Just run

bower install fakeloader

1. Include in HTML Document

Include in the top of your <body> tag

<div id="fakeLoader"></div>

2. Include Styles

Inside <head> tag

<link rel="stylesheet" href="yourPath/fakeLoader.css">

3. Include Folowing Libraries

JQuery reference and the fakeLoader.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<script src="yourPath/fakeLoader.min.js">

4. Basic Initialize

Include in bottom of your <body> tag


    <script type="text/javascript">
        $("#fakeLoader").fakeLoader();
    </script>

5. Options

<script type="text/javascript">
    $("#fakeLoader").fakeLoader({
        timeToHide:1200, //Time in milliseconds for fakeLoader disappear
        zIndex:999, // Default zIndex
        spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 
        bgColor:"#2ecc71", //Hex, RGB or RGBA colors
        imagePath:"yourPath/customizedImage.gif" //If you want can you insert your custom image
        
});
 &lt;/script&gt;


6. Block Mode

You can show loader until something execute finished.
<script type="text/javascript">
    // init fakeLoader
    $("#fakeLoader").fakeLoader({
            blockMode:true, //set fakeLoader use blockMode    
            timeToHide:1200, //Time in milliseconds for fakeLoader check release status
            zIndex:999, // Default zIndex
            spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 
            bgColor:"#2ecc71", //Hex, RGB or RGBA colors
            imagePath:"yourPath/customizedImage.gif" //If you want can you insert your custom image
});

// call again after 1.5s, and release it.
// @note: the real used time is  1.5s ~ (1.5s + settings.timeToHide) 
setTimeout(function () {
    $("#fakeLoader").fakeLoader({
            release:true
    });
}, 1500);

 &lt;/script&gt;

Recommend Projects