ローディング中に表示するGIFアニメーションを考えた

Share on Facebook
このエントリーをはてなブックマークに追加
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
LINEで送る

アプリケーションやサイトで読み込み中の場合に表示するローディング/loadingステータスバー。
最近だとFacebookのローディングが一番よくお目にかかるかな。その前だとiPhoneのSpinnerとかでしょうか。

loadingの画像

実装と準備の考察です。

僕が多投するのは、やっぱりお手軽jQueryを使ってしまうことが多いです。

■HTML側ではDivを用意。

<div id="res"></div> 

■DIVに対して、jQueryでおまじない(JavaScript側)。

$('#res').html('<img src="spinner.gif" />');

もちろん、ロード後の処理があったりするので、上のJSには.load(url);とかを組み合わせることはありますね。

簡単なサンプルも作成しました。
ローディング画像のサンプル/http://www.relaxsize.com/sample/loading/

んー何か読み込ませながらやるサービスを作りたいですね。
創作意欲は沸いてきているのですが・・。重い腰を上げるのが。

ついでにご紹介!
ローディング画像を作ることが出来るWebサービス。

■Chimply Beta
http://www.chimply.com/

chimply

SpinnerもアニメーションBarもオンライン上で作成できます。
よくあるSpinnerもサクっと作れるので、結構重宝しています。感謝!

Leave a Comment