ローディングアニメーションを生成する 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>

【使い方（dot）】
☆html

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

☆JavaScript

[ 開始 ]
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();

☆結果



【使い方（heart）】
☆html

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

☆JavaScript

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

[ 終了 ]

☆結果