:: ローディング用のGIFアニメーションアイコン作成から実装まで

最近ネットサーフィンしているとよく目にするローディング画像を作成する機会があり、色々と調べたのでまとめました。

Loading GIF Generatorを使って簡単に作成できるサービスと、ローディングアイコンの作成方法を紹介します。

ローディングアイコンの作成方法は、よく利用しているCode Penで公開されているコードを参考にしています。

INDEX

1) Loading GIF Generator
2) ローディングアイコンの作成方法
3) ローディングアイコンの実装方法

Loading GIF Generator

loading.io

定番でよく目にするアイコンがたくさんあって便利です。アイコンによってスピードとか色とかを変えることが出来ます。

http://loading.io/

Loading GIF & APNG (AJAX loaders) generator

17種類から選べて811から選べます。色々なタイプがあるので見ているだけでワクワクしてきます。定番もありつつ、以外なアイコンがあるのも特徴的です。

http://preloaders.net/

Chimply

こちらも定番からちょっと変わったデザインまで、アイコンが用意されています。デザインは少し古いイメージです。

http://www.chimply.com/Generator

spin.js

spinのアイコンを元に細かい調整ができます。jsをダウンロードして使います。勝手な想像ですが、結構使っているサイトが多いのではないでしょうか？

http://spin.js.org/

ローディングアイコンの作成方法

ローディングアイコンはよくSVGが使われています。

SVGとは

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 アニメーションやユーザインタラクションもサポートしている。 SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

完成イメージ

ソースコード

ローディングアイコンの実装方法

以下にある、HTML、CSS、Javascriptをそのまま設置してみてください。

コンテンツの中身をcontainerで囲み、cssで初期状態を表示しないように設定しておきます。
読み込みが終わる前まではloading.gifを表示し、読み込みが完了した時点で、containerをfadeInさせます。

$(“#loading”).fadeOut(0);
$(“#container”).fadeIn(0);

の(0)の箇所でfadeのスピードを設定しています。0の場合は一瞬で表示・非表示されることになります

HTML

CSS

Javascript

すごく簡単に実装できるので試して見てください！