今日の人気記事

まだデータがありません。

アニメ効果付きのローディングを実装「fogLoader」

当ページのリンクには広告が含まれています。

スポンサーリンク

アニメ効果付きのローディングを実装するプラグイン「fogLoader」を紹介します。

jQueryプラグイン「fogLoader」

このプラグインを使えば、メッセージやプログレッシバーなどのローディングを実装することができます。

メッセージは簡単に変更することができるので、ユーザーに何をしているのかを伝えるのに便利です!

スポンサーリンク

「メッセージ」と「プログレッシバー」のデモをご用意しました。

「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

スポンサーリンク

関連記事(一部広告含む)