PrognRollを使ったプログレスバーの実装方法【jQuery】

Programming Web

Web制作者

Web制作者
「スクロール量に対応したプログレスバーを実装したけど、いい感じに楽な方法はないかなぁ・・・?」

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

本記事の内容

  • PrognRollを導入して、スクロール量に対応したプログレスバーを実装する方法

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

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

Web制作をしている中で、スクロール量に対応したプログレスバーというものを実装する機会がありました。

プログレスバーのイメージ

プログレスバーのイメージ

こういったプログレスバーを自作してもいいですが、今回は先人の知恵を借りることにします。ありがたいことに、現在ではフリーで使えるjQueryプラグインが色々あります。

PrognRollという軽量jQueryでプログレスバーを実装する方法を紹介します。

PrognRollのによるプログレスバー実装方法

具体的な実装方法を詳しく説明します。

【Github】PrognRoll

» PrognRoll

jQuery読み込み

まず、headタグ内でjqueryを読み込みます。

jQueryの読み込み

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

動作に必要なファイルを読み込み

<head>内にプログレスバー実装用のJavaScriptファイル記述します。

JavaScriptファイルの読み込み方法

  • GitHubのJavaScriptファイルを直接読み込む方法
  • JavaScriptファイルをダウンロードして、サーバーにアップロードして読み込む方法

それぞれ詳しく説明します。

GitHubのJavaScriptファイルを直接読み込む方法

<script src="https://raw.githack.com/mburakerman/prognroll/master/src/prognroll.min.js"></script>

上記コードを<head>内に記述します。

JavaScriptファイルをダウンロードして、サーバーにアップロードして読み込む方法

GitHubにファイルが公開されています。
GitHub – mburakerman/prognroll

JavaScriptファイルの中身のコードはこちら。
prognroll.min.js

JavaScriptファイルのページへアクセスし、右クリックでprognroll.min.jsという名前で保存し、サイトを運営しているサーバーの任意の場所へアップします

<script src="(任意のパス)/prognroll.min.js"></script>

これで準備はOKです。

JavaScript

次に、動作させるためのJavaScriptのコードを記述します。

$(function() {
  $("body").prognroll();
});

基本的に、JavaScriptに上記コードを記述するだけで動作します。簡潔で分かりやすいですね。

実装イメージ

プログレスバーのイメージ
デフォルトはバーの色はエメラルドグリーンで、bodyタグを基準にプログレスバーが実装されます。

PrognRollにはいくつかオプションが用意されています。

設定できるオプション

オプション 単位 詳細
height px プログレスバーの高さを指定
color hex、rgb プログレスバーの色を指定
custom boolean(true/false) trueにすると、body以外に別のdiv要素を追加して、その要素上のスクロール量をプログレスバーに反映させる。

heightcolorはCSSで指定する時と同じように設定できます。

設定を変更して実装

オプションを指定して、カスタマイズしてみます。

バーの高さ・色を変更

バーの高さを15pxにして、色を赤にしてみました。

JavaScript

$(function() {
	$("body").prognroll({
		height: 15,
		color: "#FF0000",
		custom: false
	});
});

実装イメージ

カスタマイズ実装イメージ

新しく要素を追加

新しく要素を追加して、その要素内でスクロール量をプログレスバーに反映させます。

HTML

<div class="box">
(~省略~)
</div>

div要素を追加してその中にコンテンツを記述します。

CSS

.box {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 250px;
	height: 1500px;
	padding: 5px 10px;
	color: #333;
	border: 1px solid #d1d1d1;
	overflow: auto;
}

分かりやすく絶対位置にしておきます。

JavaScript

$(function() {
	$(".box").prognroll({
		custom: true
	});
});

custom:trueに設定します。

実装イメージ

カスタマイズ実装イメージ

まとめ

PrognRollでプログレスバーを実装する方法について再度まとめます。

ポイント

  • jQueryを読み込む
  • PrognRollの実装用JavaScriptファイルを読み込む
  • 動作させるためのJavaScriptを記述する
  • プログレスバーの色と高さを指定する
ほんの数分で、簡単コピペで実装できます。
サイトを少しおしゃれにしたい時に使ってみてください。

プログレスバー実装方法まとめ

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

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】