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

/ WEB制作・開発デザイン

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

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

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

 

   

 

INDEX

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

 

Loading GIF Generator

 

loading.io

161113_photo001

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

http://loading.io/

 

Loading GIF & APNG (AJAX loaders) generator

161113_photo002

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

http://preloaders.net/

 

Chimply

161113_photo003

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

http://www.chimply.com/Generator

 

spin.js

161113_photo004

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

 

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

 

SNS SHARE

LEAVE A REPLY