速度やサイズ、形状もカスタマイズ可能なローディングアイコン「jquery.cssloading.js」
jquery.cssloading.jsはCSS3/Canvasを使ってローディングアイコンを生成するライブラリです。
Ajaxなどを使っていると必ず欲しいのがローディングアイコンです。一つであれば画像でもいいかも知れませんが、背景色や大きさなどが複数考えられる場合もあります。そんな時にはjquery.cssloading.jsを使ってみましょう。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-06 13.55.31.1362546572.png)
サークルを描く一般的なパターン。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-06 13.55.42.1362546574.png)
背景が黒、左から右に流れていくパターン。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-06 13.55.52.1362546576.png)
四角もあります。色やスピードはオプションで指定可能です。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-06 13.56.00.1362546578.png)
縦に落ちていく四角のパターン。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-06 13.56.07.1362546580.png)
枠を描くパターン。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-06 13.56.15.1362546583.png)
こちらは複雑で、回転するごとに四角が小さくなっていきます。
アニメーションの形は円、または線、四角が選べます。色やサイズ、回転速度は自由に指定が可能です。CSS3を用いており、Canvasに対応している必要があります。主にiOSやAndroidでの利用が想定されているようです。
jquery.cssloading.jsはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
MOONGIFTはこう見る
一般的にこの手の処理にはアニメーションGIFが用いられます。しかしRetinaで回転させるとどうもシャギーが目立ったり、背景色との調整が必要であったりと何かと面倒な印象があります。jQueryを読み込む必要がありますが、jquery.cssloading.js自体は7.5KB程度（非圧縮時）なので手軽に使えるかも知れません。
画像はバイナリであるため、再利用性は自ずと低くなります。よりカスタマイズしやすく、プログラムから扱いやすくするためにはテキストから生成する方がいいでしょう。スマートフォン、タブレット向けのWebアプリケーションを考える際には要チェックです。