【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のみですのでカスタマイズも行いやすいです。

関連記事

【フォト】世界で美しい星空保護区の星空

みなさんは「星空保護区」というのをご存知ですか?その名前の通り、保護すべき美しい星空が見える地域として認定しようという取り組みです。 国際ダークスカイ協会(IDA)によって世界中の暗い夜空の保護・保存を目指し、保護区を認定する活動が行われています。 UNESCO(ユネスコ)で...続きを読む

2016.07.13フォトギャラリー

【デザイン】想像力を刺激するようなクリエイティブな本棚

今回は、タイトルの通り普通の本棚とは異なるアイディアにあふれたクリエイティブな本棚のデザインをまとめてみました。 “Bias of Thoughts” 目の錯覚を利用した不思議なデザインです。 Link:http://melbournea...続きを読む

2015.02.15インスピレーション

【CSS】CSS3による枠線の新しい表現方法

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。 角丸(border-radius) 「b...続きを読む

2015.02.08CSSHTMLコーディング

【CSS】CSSカウンター入門|番号を自動で付与する基本と活用例

CSSカウンターとは?初心者でもできる番号自動付与の基本 Webサイトを作っていると、リストや段落に番号を振りたい場面が多々あります。 HTMLの<ol>タグを使えば自動的に番号が付与されますが、「思った通りにデザインできない」...続きを読む

2025.10.02CSSHTMLコーディング

【WP】カテゴリーやタグにサムネイルを反映するプラグイン「Taxonomy Thumbnail」

WordPressでサイトを構築して、記事を投稿するとき「カテゴリー」や「タグ」をつけることができます。一般的に「カテゴリー」や「タグ」にはテキストを設定して、表示もテキストを中心にしたものが多く、装飾などはCSSや画像を組み合わせて表現していることが多いと思います。 今回...続きを読む

2016.07.02WordPress