読者です 読者をやめる 読者になる 読者になる

ゆたんぶろぐ

気が向いたら書いてます

ローディングアニメーションを生成する jQuery プラグイン jquery.wakeup.js

ローディングアニメーションを生成する jQuery プラグインを作ってみました。wakeUp() でアニメーション開始、goToSleep() でアニメーション停止を行います。アニメーションの形やスピードなどは、プロパティを与えて設定します。
GitHub: jquery.wakeup.js

☆確認環境
Chrome/Safari/Firefox/Opera(heart 以外)

☆プロパティ一覧

  • type:アニメーションの形(circle/dot/line/beat/star/heart)
  • color:色(CSSで定義できる値)
  • size:サイズ(canvasのサイズ、数値)
  • speed:アニメーションのスピード(ミリ秒)
  • clockwise:右回りか左回りか(trueが右回り)
  • item:表示されるアイテムの量(数値)
  • itemSize:表示されるアイテムのサイズ(数値)
  • phase:アニメーションの段階(数値)
  • fade:fade inもしくはfade out する際の完了までの時間(ミリ秒)
  • fadeIn:fade inするかどうか(trueで実施)
  • fadeOut:fade outするかどうか(trueで実施)

☆ファイルの読み込み

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.wakeup.js'></script>

☆html

<button id='dot'>Play/Stop</button>
<div id='wake_dot'></div>

JavaScript(dot)

// 開始
var option = {
  type: 'dot',
  color: 'rgb(255, 0, 0)',
  size: 50,
  speed: 30,
  clockwise: false,
  item: 20,
 itemSize: 1
};
$('#wake_dot').wakeUp(option);

// 終了
$('#wake_dot').goToBed();

☆結果
サンプルページ


☆html

<button id='heart'>Play/Stop</button>
<div id='wake_heart'></div>

JavaScript(heart)

// 開始
var option = {
  type: 'heart',
  color: 'rgb(255, 0, 255)',
  size: 30,
  speed: 50
};
$('#wake_heart').wakeUp(option);

☆結果
サンプルページ