ITエンジニア/デザイナ向けにオープンソースを毎日紹介

jquery.cssloading.jsはCSS3/Canvasを使ってローディングアイコンを生成するライブラリです。

Ajaxなどを使っていると必ず欲しいのがローディングアイコンです。一つであれば画像でもいいかも知れませんが、背景色や大きさなどが複数考えられる場合もあります。そんな時にはjquery.cssloading.jsを使ってみましょう。


サークルを描く一般的なパターン。


背景が黒、左から右に流れていくパターン。


四角もあります。色やスピードはオプションで指定可能です。


縦に落ちていく四角のパターン。


枠を描くパターン。


こちらは複雑で、回転するごとに四角が小さくなっていきます。

アニメーションの形は円、または線、四角が選べます。色やサイズ、回転速度は自由に指定が可能です。CSS3を用いており、Canvasに対応している必要があります。主にiOSやAndroidでの利用が想定されているようです。

jquery.cssloading.jsはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。


MOONGIFTはこう見る

一般的にこの手の処理にはアニメーションGIFが用いられます。しかしRetinaで回転させるとどうもシャギーが目立ったり、背景色との調整が必要であったりと何かと面倒な印象があります。jQueryを読み込む必要がありますが、jquery.cssloading.js自体は7.5KB程度(非圧縮時)なので手軽に使えるかも知れません。

画像はバイナリであるため、再利用性は自ずと低くなります。よりカスタマイズしやすく、プログラムから扱いやすくするためにはテキストから生成する方がいいでしょう。スマートフォン、タブレット向けのWebアプリケーションを考える際には要チェックです。

jquery.cssloading.js | Archives | Flügel

wings1685/jquery.cssloading.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2