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

関連記事

【デザイン】印象に残るビジネスカードデザイン

名刺は自分たちのことを覚えてもらうために重要なビジネスツールです。そこで受け取ったら印象に残るであろうデザインのビジネスカードを集めてみました。 Tok&Stok(Business Card) ブラジルの家具メーカー「Tok&Stok」のビジネスカード...続きを読む

2015.02.15インスピレーション

【JavaScript】ページ内リンクでページスクロールを実現する「smoothScroll.js」

「smoothScroll.js」は、ページ内リンクでページをスクロールを実装できすJavaScriptライブラリです。jQueryを実装していない状態でも稼働するので、手軽に導入できます。 基本的な使い方 導入は簡単、ライブラリを読み込むだけで実装でき、設置後は...続きを読む

2018.02.27HTMLコーディング

【WP】標準ギャラリーをGalleriffic対応にするプラグイン『Photospace』

『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。 WordPressでは標準ギャラリーのショートコードの出...続きを読む

2015.02.18WordPress

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー

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

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

2015.02.06HTMLコーディング