spin.js
http://fgnass.github.com/spin.js/
画像も外部CSSも不要で、その上jQueryに依存せずにローディングアニメーションを表示することができるspin.jsというのもをいじってみました。
「ギャラリーサイトにこのspin.jsを設置してほしい」と言われ「え？普通にgif画像じゃあかんのですのん？」と思いつついじる流れになっただけですので、個人的にはやはりgif画像でローディングを表示してもいいのでは、と思ったり。
とはいえ、色とかサイズとか細かい設定をスクリプト上ですぐ変更できるというのは楽でいいですね。
以下、設置したソースのメモ。
<script type="text/javascript" src="spin.min.js"></script>
<script>
$(document).ready(function($) {
var opts = {
lines: 13,
length: 30,
width: 12,
radius: 34,
corners: 1,
rotate: 30,
color: '#888',
speed: 1,
trail: 89,
shadow: true,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: 'auto',
left: 'auto'
};
var target = $('#spinjs').get(0);
var spinner = new Spinner(opts).spin(target);
$("#spinjs_on").click(function(){
spinner.spin(target);
});
$("#spinjs_off").click(function(){
spinner.stop();
});
});
</script>
<style type="text/css">
#spinjs_block{width:200px;height:220px;margin:10px auto;}
#spinjs{width:198px;height:198px;border:1px solid #888;padding:10px;}
</style>
<div id="spinjs_block">
<div id="spinjs"></div>
<input type="button" id="spinjs_on" value="on" />
<input type="button" id="spinjs_off" value="off" />
</div>
