Web技術系中心に割と何でも更新中

【簡単コピペ】PACE.jsでプログレスバーを実装する方法【jQuery】

Programming

Web制作者

Web制作者
「プログレスバーってどうやって作るの?」
「簡単にプログレスバーを実装する方法を知りたい」

こういった要望にお応えします。

本記事の内容

  • Javascriptライブラリ「Pace」を使ったプログレスバー実装手順

こんにちは、mineです。
Web制作歴は7年になります。

Webページローディング中に、プログレスバーが表示されてページ読み込みの進捗を確認できるサイトをよく見かけます。

プログレスバーとは?

例えばウェブサイト読み込み状況の進捗をメーターなどのアニメーションで可視化したものをいいます。進捗度には、全体の処理(%)であったり、処理するデータサイズ(kbキロバイト)など様々です。進捗バーとも呼ばれたりします。

プログレスバーのイメージ

プログレスバーサンプル

イメージはこんな感じです。
読み込み中に表示され、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ファイルをダウンロードして読み込む

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です。

HTMLは記述なしです。必要がありません。ライブラリによってプログレスバーを構成するHTMLが作成されます。
CSSも上記の手順でコピペするだけでOKです(記述すると長くなってしまうので省略)。

ほぼコピペしかしていませんが、これだけで動きます。すごい!

各テーマのイメージ

PACE.jsの公式ページから、テーマをいくつかピックアップして、配色を変えたものを実装してみました。

実装したいサイトのイメージに合ったものを選んでみてください。

Loading Bar

Loading Bar

テーマの「Loading Bar」の実装イメージです。わかりやすい進捗度(%)つきのプログレスバーです。MAXが100%のシンプルなゲージをイメージしたものとなります。

Barber Shop

Barber Shop

テーマの「Barber Shop」の実装イメージです。画面全体を使った、なかなかインパクトのあるわかりやすいプログレスバーを表現しています。

Center Circle

Center Circle

テーマの「Center Circle」の実装イメージです。その名の通りロード中に画面中央で円状のアイコンがくるくる回っており、アイコンの中に進捗度(%)が表示されています。進捗度が100になるまで回り続けます。

まとめ

PACE.jsによるプログレスバー実装手順について再度まとめます。

ポイント

  • jQuery、PACE.jsのjsファイルを実装したいサイトで読み込む
  • 使用したいテーマのCSSをサイトのCSSにコピペする

jsファイルを読み込んで、テーマとなるCSSを記述してしまえばプログレスバーが表示できる、軽量でかなり便利なライブラリです。

ページ読み込みに少し時間がかかりそうな時にリッチなデザインを取り入れたい場合におすすめです。

プログレスバー実装方法まとめ

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果