wings1685 / jquery.wakeup.js Goto Github PK

これはローディングアニメーションを生成する jQuery プラグインです。
wakeUp() でアニメーション生成、 goToBed() で破棄します。
Canvas で描かれるので、Canvas 対応ブラウザ（非対応の場合は対応処理を施した上）でお使いください。

• type: アニメーションの形 / 'circle'
• color: アニメーションの色 / CSS での値
• size: アニメーションの大きさ / 数値
• speed: アニメーションの速さ / ミリ秒
• clockwise: 時計回りかどうか / true もしくは false
• fade: フェイドインやフェイドアウトの時間 / ミリ秒
• fadeIn: フェイドインするかどうか / true もしくは false
• fadeOut: フェイドアウトするかどうか / true もしくは false

• type: アニメーションの形 / 'dot' もしくは 'line'
• color: アニメーションの色 / CSS での値
• size: アニメーションの大きさ / 数値
• speed: アニメーションの速さ / ミリ秒
• clockwise: 時計回りかどうか / true もしくは false
• item: アニメーションする物体の数 / 数値
• itemSize: アニメーションする物体の大きさ / 数値
• fade: フェイドインやフェイドアウトの時間 / ミリ秒
• fadeIn: フェイドインするかどうか / true もしくは false
• fadeOut: フェイドアウトするかどうか / true もしくは false

• type: アニメーションの形 / 'beat' もしくは 'star' もしくは 'heart'
• color: アニメーションの色 / CSS での値
• size: アニメーションの大きさ / 数値
• speed: アニメーションの速さ / ミリ秒
• phase: アニメーションする段階 / 数値
• fade: フェイドインやフェイドアウトの時間 / millisecond
• fadeIn: フェイドインするかどうか / true or false
• fadeOut: フェイドアウトするかどうか / true or false

<button>Play/Stop</button>
<div id='loading'></div>

$('button').click(function() {  
	if ($('#loading').find('canvas')[0]) {  
		$('#loading').goToBed();
	} else {
		var option = {
			type: 'line',
			color: 'rgb(0, 255, 0)',
			size: 50,
			speed: 30,
			clockwise: false,
			item: 24,
			itemSize: 12
		};
		$('#loading').wakeUp(option);
	}
});

このプラグインがお役に立てば幸いです。

@astronaughts https://twitter.com//astronaughts