アニメ効果付きのローディングを実装「fogLoader」
当ページのリンクには広告が含まれています。
スポンサーリンク
アニメ効果付きのローディングを実装するプラグイン「fogLoader」を紹介します。
jQueryプラグイン「fogLoader」
このプラグインを使えば、メッセージやプログレッシバーなどのローディングを実装することができます。
メッセージは簡単に変更することができるので、ユーザーに何をしているのかを伝えるのに便利です！
スポンサーリンク
「メッセージ」と「プログレッシバー」のデモをご用意しました。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="fogLoaderのデモでーす。">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.themeswitcher.min.js"></script>
<script src="jquery.fogLoader.1.0.0.js"></script>
</head>
<body>
<div id="loader"></div>
<h1>fogLoaderのデモでーす。</h1>
<p>2つのタイプのデモをご覧ください。デモを終了する場合は「ESC」キーを押してください。</p>
<div>
<p>メッセージ</p>
<button id=class="ui-button" onclick="runLoader('spelling')">デモ①</button>
</div>
<div>
<p>プログレッシバー</p>
<button id=class="ui-button" onclick="runLoader('progressbar')">デモ②</button>
</div>
<script>
$("#switcher").themeswitcher({
imgpath: "images/",
loadTheme: "UI Lightness"
});
var _interval;
var _prog = 1;
var auto = true;
function runLoader(type){
switch (type){
case 'spelling':
auto = true;
$('#loader').fogLoader({
animated: true,
spell: true,
message: 'ろーど中'
});
break;
case 'progressbar':
auto = false;
$('#loader').fogLoader({
style: 'progressbar'
});
_interval = setInterval(function() {
$('#loader').fogLoader('updateProgress', {val: _prog});
_prog++;
if($('#loader').fogLoader('progressValue') >= 100){
$('#loader').fogLoader('close');
clearInterval(_interval);
_prog = 1;
}}, 50);
break;
}
}
</script>
</body>
</html>
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» fogLoader
スポンサーリンク