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

ページを表示した時にローディングを表示させると、ユーザーをイライラさせないこともあります。
jQueryプラグインのjQuery IntroLoaderを使用すると簡単に導入できます。
ローディングをオシャレかつ簡単に導入できるjQueryプラグイン「jqueryIntroLoader Plugin」サンプル

使用方法 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で確認ください。

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

sponsors

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

記事作成:
記事URL:

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