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

関連記事

【CSS】counterを利用した自動ナンバリング

最近は、CSSというとCSS3にクローズアップされることが多いのですが、今回は、CSS2より追加された「counter(カウンタ)」の着目してみました。 CSSの「counter(カウンタ)」を使用すると連番などの自動ナンバリングの機能を実装することができます。 ...続きを読む

2015.02.09HTMLコーディング

【HTML】Bootstrapの基本「マージン」と「パディング」

『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。 『Boots...続きを読む

2018.08.09BootstrapHTMLコーディング

カフェオールドソーコ様WEBサイト制作

富士市でモチモチの生パスタと焼きたてワッフルを楽しむことができる『カフェ オールドソーコ』様のWEBサイトを制作いたしました。手書きのメニューや店内に描かれた可愛らしいイラストにあわせてWEBサイトでもイラストを沢山用いて、ワクワク感を感じられるデザインをいたしました。 ...続きを読む

2015.02.14WEBサイト制作

【フォト】蓮華寺池公園フォトギャラリー≪冬≫

藤枝市のほぼ中央に位置し、「花・水・鳥・笑顔」がテーマの公園「蓮華寺池公園」。池を囲む公園は、桜や藤の花、蓮の花など季節を通して自然を楽しむことができる憩いの場所です。今回、紹介する冬の蓮華寺池公園の山頂周辺の写真です。自然のなかを歩いたり、眺めの良い見晴台があったり、広場やアス...続きを読む

2018.02.07フォトギャラリー藤枝

インデックスタブ制作のチュートリアルまとめ

WEBデザインにおいても、ファイル、手帳、ノートなどの端に付けるインデックスタブ(索引)と同じ機能をもつタブを作りコンテンツをまとめて表示することができます。 作り方はjQueryを使用したものや、CSSやJavascriptを使用するものなどさまざまです。今回はインデ...続きを読む

2015.02.07HTMLコーディング