jQuery

【jQuery】フルスクリーンで軽量のページプリローダープラグインfakeLoader

December 27, 2018
fakeLoader.js

fakeLoader.jsはフルスクリーンでアニメーションスピナーを使用した軽量のページプリロードjQueryプラグイン。カスタムイメージ、アニメーションスピナー、セットアップなどオプションで設定可能。

Include in HTML Document

bodyタグに加える

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

Include Styles

headタグ内に加える

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

Include Folowing Libraries

jQueryfakeLoader.jsを加える。

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

Basic Initialize

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

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;