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