最近ネットサーフィンしているとよく目にするローディング画像を作成する機会があり、色々と調べたのでまとめました。
Loading GIF Generatorを使って簡単に作成できるサービスと、ローディングアイコンの作成方法を紹介します。
ローディングアイコンの作成方法は、よく利用しているCode Penで公開されているコードを参考にしています。
Loading GIF Generator
loading.io
定番でよく目にするアイコンがたくさんあって便利です。アイコンによってスピードとか色とかを変えることが出来ます。
Loading GIF & APNG (AJAX loaders) generator
17種類から選べて811から選べます。色々なタイプがあるので見ているだけでワクワクしてきます。定番もありつつ、以外なアイコンがあるのも特徴的です。
Chimply
こちらも定番からちょっと変わったデザインまで、アイコンが用意されています。デザインは少し古いイメージです。
http://www.chimply.com/Generator
spin.js
spinのアイコンを元に細かい調整ができます。jsをダウンロードして使います。勝手な想像ですが、結構使っているサイトが多いのではないでしょうか？
ローディングアイコンの作成方法
ローディングアイコンはよくSVGが使われています。
SVGとは
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 アニメーションやユーザインタラクションもサポートしている。 SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
完成イメージ
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="loader" title="5"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <rect x="0" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="10" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="20" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite" /> </rect> </svg> </div> |
ローディングアイコンの実装方法
以下にある、HTML、CSS、Javascriptをそのまま設置してみてください。
コンテンツの中身をcontainerで囲み、cssで初期状態を表示しないように設定しておきます。
読み込みが終わる前まではloading.gifを表示し、読み込みが完了した時点で、containerをfadeInさせます。
$(“#loading”).fadeOut(0);
$(“#container”).fadeIn(0);
の(0)の箇所でfadeのスピードを設定しています。0の場合は一瞬で表示・非表示されることになります
HTML
|
1 2 3 4 |
<div id="loading"><img src="images/loading.gif"></div> <div id="container"> コンテンツ... </div> |
CSS
|
1 2 3 4 5 6 |
#container{display:none;} #loading{ position:absolute; left:50%; top:50%; } |
Javascript
|
1 2 3 4 5 6 |
window.onload = function(){ $(function() { $("#loading").fadeOut(0); $("#container").fadeIn(0); }); } |
すごく簡単に実装できるので試して見てください！
LEAVE A REPLY