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

関連記事

【デザイン】ウエディングパーティーのエスコートカード

ウエディングパーティーなど来客者をテーブルに案内するときは座席表やエスコートカードが登場しますね。今回は、クリエイティブなエスコートカードの参考事例をご紹介します。 Malibu Calamigos Ranch wedding 可愛らしいミニチュアサイズの鉢植えでお出...続きを読む

2015.03.25インスピレーション

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

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

2015.02.07HTMLコーディング

【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる

Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。 サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります...続きを読む

2015.02.08HTMLコーディング

【デザイン】デザイナーポートフォリオサイト

活躍しているデザイナーの事例をみてインスピレーションを刺激することは、デザインの勉強にもなります。今回は、デザイナーのポートフォリオサイトを集めてみました。 http://www.onebyfourstudio.com/ http://www.31three....続きを読む

2015.02.14インスピレーション

はぴねす歯科様WEBサイトのデザイン提案

大阪にある歯科クリニックのはぴねす歯科様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。かわいらしいキャラクターのロゴにデザインを合わせて、親しみやすいかわいらしいデザインになるように心がけました。虫歯治療をはじめ、歯周病、予防歯科、矯正などイラストやイメージ...続きを読む

2019.04.17WEBデザイン歯科医院