ページ読み込み時にプログレスバーを表示させることができる「PACE.js」

ページ読み込み時にプログレスバーを表示させることができる「PACE.js」

ページ読み込み時にプログレスバーを表示させることができる「PACE.js」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

PACE.jsは、ページのロード中にプログレスバーを表示することができるJavaScriptです。ダウンロードしたJavaScriptとCSSを設置するだけで、簡単に実装することができます。

以下よりデモを確認することができます。(下の方にあります)

デモページを見る

スポンサードリンク

ステップ1. PACE.jsのダウンロードと設置

まずは、GitHubからPACE.jsのファイル群をダウンロードします。右側の[Download ZIP]をクリックしダウンロードしてください。

PACE.jsのダウンロード

ダウンロードしたファイルを解凍し、pace.min.jsとCSSファイルをサーバーに設置します。CSSファイルはtemplatesフォルダの中に入っていますので、デモをチェックして使用したいものを設置してください。

ステップ2. JavaScriptとCSSの読み込み

サーバーにファイルを設置したら、<head>~</head>内に以下を記述して、PACE.jsを読み込みます。

<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />

ファイルパスとCSSファイルは適宜変更してください。

あとがき

実装が非常に簡単ですね。様々な種類のプログレスバーが用意されているので、色々と試しながら自サイトに合うものを選びましょう。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。