Create Fullscreen Preloader jQuery Plugin – fakeLoader.js

by Posted on

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.
jquery-loader-plugin


Libraries

Include the following JS and CSS libraries on page.

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

HTML

Include in the top of your tag

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

JS

Basic Initialize

$(function() {   
 $("#fakeLoader").fakeLoader();
});




List of options you can use to customize the loader plugin.

$("#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    
        }
    );

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by joaopereirawd. Visit their official github repository for more information and follow for future updates.


Published by admin