Web技術系中心に割と何でも更新中

Webページでプログレスバーを実装する8つの方法まとめ

Programming Web

Web制作者

Web制作者
「Webページでプログレスバーを実装する方法ってどんなものがあるのかな?プログレスバーにも色々あるし、プラグインとかどれを使えばいいんだろう・・・?」

こういった疑問にお答えします。

本記事の内容

  • Webページでプログレスバーを実装する方法まとめ

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

Webページにプログレスバーを表示させたいことってありませんか?
プログレスバーといっても、タイプは様々です。

プログレスバーのタイプ

  • スクロール量に対応したプログレスバー
  • ページ読み込み中に表示するプログレスバー
  • 通常のプログレスバー

mineblogでは、これまでプログレスバーの実装方法を紹介する記事をいくつか書いてきました。

この記事では、各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。

Webページでプログレスバーを実装する際の参考にしてください。

スクロール量に対応したプログレスバー

Webページをスクロールした時に、スクロール量に応じてメーターが増減するようなプログレスバーの実装方法を紹介します。

各種プラグイン

  • Scrolline.js
  • PrognRoll
  • scrollpup.js

それぞれの特徴やオプションを紹介します。

Scrolline.js

Scrolline.jsというjQueryプラグインを紹介します。

基本情報

  • jQuery必須
  • オプションあり

特徴

Scrolline.jsでは9つのオプションが用意されています。プログレスバーの配色や位置、高さ・幅などを設定することが可能です。この記事で紹介するプラグインの中でも、オプションの数はトップクラスです。

» Scrolline.jsの使い方を詳しく見る

PrognRoll

PrognRollというjQueryプラグインを紹介します。

基本情報

  • jQuery必須
  • オプションあり

特徴

PrognRollを導入すると、bodyタグを基準に非常にシンプルなプログレスバーを実装できます。バーの高さと色を設定するオプションがついています。また、新たに任意のdiv要素を追加して、そのdivを基準にした、プログレスバーを実装できます。

» PrognRollの使い方を詳しく見る

scrollpup.js

scrollpup.jsというJavaScriptプラグインを紹介します。

基本情報

  • jQuery不要
  • オプションあり

特徴

この記事で紹介しているスクロールに対応したプログレスバーを実装するためのプラグインの中では、最もシンプルです。jQueryは不要で、用意されているオプションはプログレスバーの色と高さの2つのみです。余計な設定が不要だという場合におすすめです。

» scrollpup.jsの使い方を詳しく見る

通常のプログレスバー

Webページ上に通常の任意の割合などを可視化するようなプログレスバーの実装方法を紹介します。

各種プラグイン

  • ProgressBar.js
  • lineProgressbar.js
  • jQMeter
  • HTML5

それぞれの特徴やオプションを紹介します。

ProgressBar.js

ProgressBar.jsというJavaScriptプラグインを紹介します。

基本情報

  • jQuery不要
  • オプションあり

特徴

プログレスバーの形がいくつか用意されており、線・円・半円・カスタムの4タイプあります。それぞれのプログレスバーのタイプに加えて、配色やアニメーションの速度、数値(テキスト)の表示位置などを指定できます。

» ProgressBar.jsの使い方を詳しく見る

lineProgressbar.js

lineProgressbar.jsというjQueryプラグインを紹介します。

基本情報

  • jQuery必須
  • オプションあり

特徴

フラットデザインのプログレスバーを実装できます。配色・角丸の設定、アニメーションの有無、数値の表示切り替えなどのオプション数も10個用意されています。

» lineProgressbar.jsの使い方を詳しく見る

jQMeter

jQMeterというjQueryプラグインを紹介します。

基本情報

  • jQuery必須
  • オプションあり

特徴

プログレスバーの配色、高さの設定などの基本的なオプションに加えて、バーを水平方向or垂直方向に切り替えたりアニメーションのスピードを設定することができます。

» jQMeterの使い方を詳しく見る

HTML5

HTML5(progressタグ、meter)を紹介します。

特徴

progressタグを使用すると、進行状況を可視化することができます。また、ブログ記事のカテゴリの割合を可視化するなどの場合は、meterタグを使用します。

» HTML5によるプログレスバーの実装方法を詳しく見る

ページ読み込み中に表示するプログレスバー

Webページ読み込み中に、読み込みの進捗を可視化したプログレスバーの実装方法を紹介します。

PACE.jsというjQueryプラグインを紹介します。

基本情報

  • jQuery必須
  • テーマあり

特徴

2020年6月現在で、用意されているテーマが14種類あります。配色とテーマを選択して、CSSをコピペするだけでプログレスバーを実装できます。

» PACE.jsの使い方を詳しく見る

まとめ

どの方法も非常に簡単に導入できます。
使用する状況に応じて、使えそうな実装方法を選択してみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果