たった10秒でローディング画面を実装出来るjQueryプラグインPACE.js！

WEBサイトの読み込み時間に表示されるローディング画面。
ユーザーにストレスを与えず待ってもらう為にも気持ちの良いローディング画面を作りたいものです。

今回は本当にコピペするのみ！たった10秒で実装出来てしまうJqueryプラグインのPACE.jsの使い方と、
ローディングアニメーションを作成するのに便利なライブラリをいくつかまとめたのでご紹介します！

jsとcssを読み込むだけ！PACE.jsの使い方

早速ですがPACE.jsの使い方です。

1.CDNでpace.jsと使いたいテーマのcssをheadに記述CDNはこちら

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpace%2F1.0.2%2Fpace.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-center-circle.min.css" />

以上です！！！簡単！

出来たローディング画面はこちらです↓
(ページが軽いので冒頭のローディングバーは一瞬です…^^;)

DEMO

このプラグインでは10色×14パターンのCSSが用意されているので、使いたいものを選んでください。
ちなみにデモでは、テーマは「Loading Bar」カラーは「green」を使っています。

カスタマイズもなく、使いたいデザインが決まっているなら、本当に10秒もしないでローディング画面が作れてしまいます！

ただ、このままだとローディングしている時もコンテンツが出る可能性があるので、丸っとclass=“”wrap”などでコンテンツを囲い、display: noneで隠しておきます。

また表示される時はフェードインで自然に切り替わるようにしてみましょう！

【CSS】

.pace-running .wrap {
            display:none;
        }

【js】

Pace.on('done', function(){
            $('.wrap').fadeIn();
        });

今回はお手軽重視でCDNを使いましたが、色や形状をアレンジする場合を考えるとGitHubからcssファイルをダウンロードしてサーバーにアップした方が良いでしょう。

カスタマイズも簡単！オリジナルのローディングアイコンを作成出来るライブラリ

PACE.jsはとても簡単ですが、もっとオリジナルのローディングアニメーションを作る必要がある時に便利なライブラリを、GIF形式、SVG形式、CSSの3パターンに分け、特徴とおすすめライブラリをまとめました。ライブラリを使えばどの形式でも少しのアレンジでオリジナリティーを出せますので、是非参考にしてみてください。

画像が劣化せず仕上がりきれい！SVG形式

GIFやPNG,JPEGのビットマップ形式とは違い、XMLベースのベクター形式の為、拡大縮小しても画像が劣化しません。この点ではCSSのみで実装しているローディングアイコンと同じですが、SVGはIllustratorでの編集さえ出来れば、企業のロゴなどのCSSだけでは再現の難易度が高いモチーフを作る事が出来るので、サイトにオリジナル感を出せるのが最大の特徴ではないでしょうか

SVGローディングの特徴

• レスポンシブも高画質ディスプレイも怖くない！画像劣化のないベクター形式
• CSSでは再現できないような複雑なモチーフや、企業ロゴなどもローディングアイコンに出来るのでオリジナル感を出せる
• IE8より下のバージョンやAndroid3.0などでは、インラインSVGが使えません。フォローバック画像を用意したりjsのプラグインを使うなど…いろいろと考慮し実装する必要があります。

動くと楽しい！SVG形式のライブラリを2つ紹介！

SVG Loaders

SVG Loaders

スムーズにアニメーションする12種類のアイコンがパックになっています。
色を変えたり形状を変えたりは結局Illustratorやhtmlで調整が必要ですが、既存のアニメーションを参考にしていけば1から作成するよりもスピーディーかついい感じにオリジナルのローディングアイコンを作れます！

実際にペコプラカラーでアレンジしてみたローディングアイコンがこちらです！

デモはこちら

SVGator

SVGator

コーディングが出来なくてもSVGアニメーションが実装出来るオンラインツールです！
SVGファイルをインポートし、アニメーションの編集、そしてダウンロードする事が出来ます。
コード書くにはちょっと億劫な複雑なアニメーションを作れます！

定番！GIF形式のローディング

GIF形式はローディングアイコンに限らず、アニメーション画像の定番でもあります！
IE対応がまだされていないSVGローダーやCSSローダーは別途jsを使ってサポートしなければいけませんが、GIF形式はその必要がなくブラウザの互換性の面で安定しています！
ブラウザの互換性の心配がないのって、結構大事ですよね・・・

またSVGやCSSでは難易度の高いモチーフを扱える事もメリットのひとつではないでしょうか。

ただ拡大縮小した時に画像が劣化してしまうという点で、昨今のモバイル化や高画質ディスプレイへの対応という点ではSVGやCSSに劣ってきます。

GIFローディングの特徴

• CSSやJavaScriptでアニメーションの実装をせずにアニメーションが作れるので非コーダーでも比較的自由度の高いアイコンが作成出来る
• CSS3やJavaScriptを使わなくても良い為、ブラウザの互換性がある
• 拡大縮小をした時に画質が劣化する。故にレスポンシブ時や高画質ディスプレイで見た時にあまり綺麗ではない

簡単にGIFローディングアイコンを作成出来るloading io

loading io

カラーやサイズ、スピードに形状など、カスタマイズする上で基本的な設定項目が揃っており、カラフルなアイコンが作れる事も特徴です。テキストアニメーションもあります。

またGIFだけでなく、SVGやCSS形式でダウンロードが可能です。^{※ただしこちら有料のようです}

画像不要で軽量化！CSS編

ライブラリを読み込んだり、コピペOKのものばかりなので、WEBデザイン初心者でも簡単に実装していけます。
また、ファイルが軽くなる点もメリットのひとつです。
オリジナリティーは出しにくいですが、定番のローディング画面を簡単に実装する場合には手軽に使う事が出来ますね！

CSSローディングの特徴

• レスポンシブも高画質ディスプレイも強くない！拡大縮小しても劣化しない
• 画像を用意する必要がないのでファイルの軽量化が出来る
• CSSが出来ればカスタマイズが簡単である

Single Element CSS Spinners

Single Element CSS Spinners

Loaders.css

Loaders.css

SpinKit

SpinKit

まとめ

いかがでしたか？
jQueryプラグインやライブラリを使う事は、速い・簡単・お手軽という面もありますが、アイデア次第で、より魅力的なものを作れる可能性を秘めていると考えます！
ローディング画面について、本来であれば読み込み時間の少ないページ作りの方が重要ではあります！
また、読み込み速度の早いページにローディング画面を実装してしまっても、画面が切り替わる事がユーザーにとってかえってストレスになるという事にもなりかねません。
しっかりユーザビリティを考え、まずはページの読み込み速度をあげる事を心がけてください。その上で、読み込みの遅いページに魅力的なローディング画面が作れるよう、今回の記事を参考にしていただければ幸いです！