【簡単コピペ】PACE.jsでプログレスバーを実装する方法【jQuery】
Web制作者
「プログレスバーってどうやって作るの？」
「簡単にプログレスバーを実装する方法を知りたい」
こういった要望にお応えします。
本記事の内容
- Javascriptライブラリ「Pace」を使ったプログレスバー実装手順
こんにちは、mineです。
Web制作歴は7年になります。
Webページローディング中に、プログレスバーが表示されてページ読み込みの進捗を確認できるサイトをよく見かけます。
プログレスバーとは？
プログレスバーのイメージ
イメージはこんな感じです。
読み込み中に表示され、100%になったら読み込みが完了しサイトのコンテンツが表示されます。
この記事では、プログレスバーを簡単に実装できる軽量JavaScriptライブラリ「Pace.js」の使い方ご紹介します。ソースコードをコピペするだけで動作するのでとても簡単ですよ。
PACE.jsによるプログレスバー実装手順
ここから、PACE.jsの実装手順についてご紹介します。
PACE.jsの実装手順
- jQueryを読み込む
- 公式サイトからjsファイルをダウンロードして読み込む
- テーマを選択してCSSをコピペ
jQueryを読み込む
jQueryを<head>内に記述します。
<head>への記述
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>公式サイトからjsファイルをダウンロードして読み込む
下記URLにアクセスし、Downloadのところにある「PACE.JS」ボタンを右クリックし、名前をつけてリンク先のjsファイルpace.min.jsをローカルに保存します。
PACE — Automatic page load progress bars
保存したpace.min.jsをサイトをサーバの任意のディレクトリににアップロードします。
<head>への記述
<script type="text/javascript" src="(任意のディレクトリ)/pace.min.js"></script>アップロードしたpace.min.jsを<head>内で読み込ませます。
テーマを選択してCSSをコピペ
2020年2月現在、公式に用意されている14種類の中からプログレスバーのテーマを選択可能です。
テーマの選び方
- 配色の選択
- テーマの選択
- 選択したテーマのCSSをコピペ
まず下記URLにアクセスします。
PACE — Automatic page load progress bars
ThemesのところにあるCHOOSE A COLORボタンをクリックすると、配色を変更できます（デフォルトは水色）。
配色を決定したら、それぞれのテーマ名の下にあるCOPY TO CLIPBOARDというテキストリンクがあるので、使いたいテーマのものをクリックして、テーマ用のCSSをコピーします。
コピーしたCSSを実装したいサイトのCSSにペーストすればOKです。
CSSも上記の手順でコピペするだけでOKです（記述すると長くなってしまうので省略）。
ほぼコピペしかしていませんが、これだけで動きます。すごい！
各テーマのイメージ
PACE.jsの公式ページから、テーマをいくつかピックアップして、配色を変えたものを実装してみました。
実装したいサイトのイメージに合ったものを選んでみてください。
Loading Bar
テーマの「Loading Bar」の実装イメージです。わかりやすい進捗度（%）つきのプログレスバーです。MAXが100%のシンプルなゲージをイメージしたものとなります。
Barber Shop
テーマの「Barber Shop」の実装イメージです。画面全体を使った、なかなかインパクトのあるわかりやすいプログレスバーを表現しています。
Center Circle
テーマの「Center Circle」の実装イメージです。その名の通りロード中に画面中央で円状のアイコンがくるくる回っており、アイコンの中に進捗度（%）が表示されています。進捗度が100になるまで回り続けます。
まとめ
PACE.jsによるプログレスバー実装手順について再度まとめます。
ポイント
- jQuery、PACE.jsのjsファイルを実装したいサイトで読み込む
- 使用したいテーマのCSSをサイトのCSSにコピペする
jsファイルを読み込んで、テーマとなるCSSを記述してしまえばプログレスバーが表示できる、軽量でかなり便利なライブラリです。
ページ読み込みに少し時間がかかりそうな時にリッチなデザインを取り入れたい場合におすすめです。
プログレスバー実装方法まとめ
Webページでプログレスバーを実装する8つの方法まとめ
mineblogでプログレスバーの実装方法をいくつか紹介してきました。各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果