ローディングアニメーションを生成する 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);
☆結果
サンプルページ