【JavaScript】ページの読込状況を表示するプログレスバーを実装する『PACE』

progress-bar-javascript-pace

WEBサイトのページを読込とき、読込むファイル数が多かったりライブラリを参照することでページの読込が完了するまでに時間がかかる場合があります。

読込時間が長いページを制作する場合は、読込状況を視覚的に表示することができるプログレスバーを設置すると閲覧する方に親切になると思います。

今回は、プログレスバーを簡単に実装することができるJavaScriptライブラリ『PACE』の紹介です。

実装イメージ

progress-bar-javascript-pace

ダウンロード

ライブラリデータのダウンロードやドキュメントがこちらのページより行うことが出来ます。

実装方法

実装は、head要素内でライブラリの本体である「pace.js」とデザインテーマがまとめられている「CSS」の2つを読込むことでできます。

<head>  
  <script src="../pace.js"></script>  
  <link href="../themes/pace-theme-corner-indicator.css" rel="stylesheet" />  
</head> 

上記のファイルを設置のみで自動的にプログレスバーが表示されるようになります。

必要に応じてオプション内容や初期値を変更したい場合は、以下のような2つの方法でパラメータを設定することができます。

「window.paceOptions」を利用する方法

    <script>  
    paceOptions = {  
      // Configuration goes here. Example:  
      elements: false,  
      restartOnPushState: false,  
      restartOnRequestAfter: false  
    }  
    </script>  

scriptタグ内で「data-pace-options」を利用する方法

    <script data-pace-options='{ "ajax": false }' src='pace.js'></script>  

『PACE』はデザインのバリエーションも多く、カラー指定もCSSのみですのでカスタマイズも行いやすいです。

関連記事

【JavaScript】横にスライドするレスポンシブメニューを実装するライブラリ『mmenu』

スマートフォンやタブレットのアプリなどでボタンを押すとメニューが横から展開するインターフェイスをみることがあります。今回はそのような横にスライドするメニューを実装することができるJavaScriptライブラリ『mmenu』を紹介します。 『mmenu』 ダウン...続きを読む

2015.03.04HTMLコーディング

Webで最も人気のあるフロントエンド·テンプレート『html5-boilerplate』

『html5-boilerplate』は無償でコピー、加工、再配布が可能なHTML5ベースのテンプレートパッケージです。 このパッケージのコンセプトとして、フロントエンド(初期段階)にかかる作業を短縮して、高速で堅牢、柔軟性のあるWEBアプリやサイトを素早く構築すること...続きを読む

2015.02.06HTMLコーディング

サロンドブー様で行われたテレビ撮影に密着しました

富士市にある美容室とエステサロンの『サロンドブー』様の写真撮影をいたしました。サロンドブー様でサービス提供している霧でかける新感覚のパーマシステム「プルームパーマ」のテレビ撮影があるとのことで、密着さいて撮影の様子や「プルームパーマ」の施術の様子を撮影いたしました。 ...続きを読む

2015.04.23フォトギャラリー

【WP】管理画面で操作をしていたらForbiddenが表示された

さくらインターネットのレンタルサーバで、WordPressを用いてWEBサイト(ホームページ)やブログを開設し、WordPressの管理画面を操作中に「Forbidden」が表示されたことありませんか? Forbidden The server refuse to...続きを読む

2018.08.02WordPressさくらインターネットレンタルサーバ

【WP】WordPress5.0の編集エディターを旧バージョンに戻す方法

WordPressのバージョンが、これまでの4.0の系統から5.0系統の最新版へのリリースとなりました。 安全性やバグの修正はもちろんですが、今回、5.0系統の最新リリースで大きく変わったのが投稿時の編集エディターとして「Gutenberg」が標準採用されたことだと思います...続きを読む

2019.02.13WordPress