ローディングをオシャレかつ簡単に導入できるjQueryプラグイン「jqueryIntroLoader Plugin」

ページを表示した時にローディングを表示させると、ユーザーをイライラさせないこともあります。
jQueryプラグインのjQuery IntroLoaderを使用すると簡単に導入できます。

sponsors

使用方法

jQuery IntroLoaderからファイル一式をダウンロード

        <link href="introLoader.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="spin.min.js"></script>
<script type="text/javascript" src="jquery.introLoader.js"></script>
<script type="text/javascript">
$(function () {
     $("#element").introLoader();
});    
</script>
    
一式読み込んだらhtmlを記述します。

<div id="element"></div>
これで完成!
なおオプションがいくつかあります。

$(document).ready(function() { 
    $("#element").introLoader({  
        animation: { 
            name: 'simpleLoader', 
            options: { 
                exitFx:'slideUp', //完了後のエフェクト fadeOut, slideUp, slideDown, slideRight, slideLeft
                ease: "easeInOutCirc", 
                style: 'dark', //light, dark, ocean, forest, fluoGreen, fluoMagenta, fluoYellow
                delayBefore: 1000, //表示後のディレイ
                exitTime: 500 //表示時間
             }
        },
        spinJs: { 
            lines: 13, // 線の数
            length: 20, // 線の長さ 
            width: 10, // 線の太さ 
            radius: 30, // 円の半径 
            corners: 1, // 角丸のR(0-1) 
            color: '#000', // 色 
            speed: 1, // 回転数 
            trail: 60, // 名残感
            shadow: false // 影
        }
    });
});
他にも色々有りますので、詳細はhttp://factory.brainleaf.eu/jqueryIntroLoader/documentation.phpで確認ください。

サンプル

リロードを。
Javascriptサンプルページ一覧
skuare.net

sponsors