Webページでプログレスバーを実装する8つの方法まとめ
Web制作者
「Webページでプログレスバーを実装する方法ってどんなものがあるのかな？プログレスバーにも色々あるし、プラグインとかどれを使えばいいんだろう・・・？」
こういった疑問にお答えします。
本記事の内容
- Webページでプログレスバーを実装する方法まとめ
こんにちは、mine（@mineblog7）です。
ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。
Webページにプログレスバーを表示させたいことってありませんか？
プログレスバーといっても、タイプは様々です。
プログレスバーのタイプ
- スクロール量に対応したプログレスバー
- ページ読み込み中に表示するプログレスバー
- 通常のプログレスバー
mineblogでは、これまでプログレスバーの実装方法を紹介する記事をいくつか書いてきました。
この記事では、各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
スクロール量に対応したプログレスバー
Webページをスクロールした時に、スクロール量に応じてメーターが増減するようなプログレスバーの実装方法を紹介します。
各種プラグイン
- Scrolline.js
- PrognRoll
- scrollpup.js
それぞれの特徴やオプションを紹介します。
Scrolline.js
Scrolline.jsというjQueryプラグインを紹介します。
【Scrolline.js】スクロールに対応したプログレスバーを実装する方法
Scrolline.jsというjQueryプラグインを導入してプログレスバーを実装する方法を紹介します。
基本情報
- jQuery必須
- オプションあり
特徴
Scrolline.jsでは9つのオプションが用意されています。プログレスバーの配色や位置、高さ・幅などを設定することが可能です。この記事で紹介するプラグインの中でも、オプションの数はトップクラスです。
PrognRoll
PrognRollというjQueryプラグインを紹介します。
PrognRollを使ったプログレスバーの実装方法【jQuery】
PrognRollという軽量jQueryプラグインでプログレスバーを実装する方法を紹介します。簡単コピペで実装できます。
基本情報
- jQuery必須
- オプションあり
特徴
PrognRollを導入すると、bodyタグを基準に非常にシンプルなプログレスバーを実装できます。バーの高さと色を設定するオプションがついています。また、新たに任意のdiv要素を追加して、そのdivを基準にした、プログレスバーを実装できます。
scrollpup.js
scrollpup.jsというJavaScriptプラグインを紹介します。
【scrollpup.js】スクロール量に対応したプログレスバーを実装する方法
スクロール量に対応したプログレスバーを自分で作ろうとすると、時間と労力がかかり面倒です。scrollpup.jsというJavaScriptプラグインを使った方法を紹介します。
基本情報
- jQuery不要
- オプションあり
特徴
この記事で紹介しているスクロールに対応したプログレスバーを実装するためのプラグインの中では、最もシンプルです。jQueryは不要で、用意されているオプションはプログレスバーの色と高さの2つのみです。余計な設定が不要だという場合におすすめです。
通常のプログレスバー
Webページ上に通常の任意の割合などを可視化するようなプログレスバーの実装方法を紹介します。
各種プラグイン
- ProgressBar.js
- lineProgressbar.js
- jQMeter
- HTML5
それぞれの特徴やオプションを紹介します。
ProgressBar.js
ProgressBar.jsというJavaScriptプラグインを紹介します。
ProgressBar.jsでプログレスバーを実装する方法
プログレスバーを簡単に実装するためのJavaScriptライブラリ「ProgressBar.js」の使い方を紹介します。
基本情報
- jQuery不要
- オプションあり
特徴
プログレスバーの形がいくつか用意されており、線・円・半円・カスタムの4タイプあります。それぞれのプログレスバーのタイプに加えて、配色やアニメーションの速度、数値（テキスト）の表示位置などを指定できます。
lineProgressbar.js
lineProgressbar.jsというjQueryプラグインを紹介します。
【lineProgressbar.js】軽量プラグインによるプログレスバーの実装方法
フリーで配布されているjQueryプラグインは色々ありますが、この記事ではlineProgressbar.jsという軽量jQueryを導入してプログレスバーを実装する方法を紹介します。
基本情報
- jQuery必須
- オプションあり
特徴
フラットデザインのプログレスバーを実装できます。配色・角丸の設定、アニメーションの有無、数値の表示切り替えなどのオプション数も10個用意されています。
» lineProgressbar.jsの使い方を詳しく見る
jQMeter
jQMeterというjQueryプラグインを紹介します。
【jQMeter】シンプルなプログレスバーを実装する方法
jQueryプラグイン「jQMeter」を使用したプログレスバーの実装方法を紹介します。シンプルなプログレスバーを実装したい時におすすめです。
基本情報
- jQuery必須
- オプションあり
特徴
プログレスバーの配色、高さの設定などの基本的なオプションに加えて、バーを水平方向or垂直方向に切り替えたりアニメーションのスピードを設定することができます。
HTML5
HTML5（progressタグ、meter）を紹介します。
HTML5だけでプログレスバー実装および割合を可視化させる方法
Webページ上にプログレスバーを実装する方法は色々あります。この記事では、HTML5のみでプログレスバーを実装する方法や、何かしらの割合を可視化させる方法を紹介します。
特徴
progressタグを使用すると、進行状況を可視化することができます。また、ブログ記事のカテゴリの割合を可視化するなどの場合は、meterタグを使用します。
ページ読み込み中に表示するプログレスバー
Webページ読み込み中に、読み込みの進捗を可視化したプログレスバーの実装方法を紹介します。
PACE.jsというjQueryプラグインを紹介します。
【簡単コピペ】PACE.jsでプログレスバーを実装する方法【jQuery】
この記事では、プログレスバーを簡単に実装できる軽量JavaScriptライブラリ「Pace.js」の使い方ご紹介します。ソースコードをコピペするだけで動作するのでとても簡単でおすすめです。
基本情報
- jQuery必須
- テーマあり
特徴
2020年6月現在で、用意されているテーマが14種類あります。配色とテーマを選択して、CSSをコピペするだけでプログレスバーを実装できます。
まとめ
どの方法も非常に簡単に導入できます。
使用する状況に応じて、使えそうな実装方法を選択してみてください。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果