ProgressBar.jsでプログレスバーを実装する方法

Programming Web

Web制作者

Web制作者
「Webサイト読み込み時にプログレスバーを表示させて、UIを向上させたい。簡単な実装方法は無いかな?」

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

本記事の内容

  • プラグインProgressBar.jsでページロード時のプログレスバーを実装する方法

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

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

Webページローディング中に、ページ読み込み中のゲージが表示されていることがあります。いわゆる、プログレスバーと呼ばれるものです。

プログレスバーとは?

ウェブサイトの読み込み状況の進捗をアニメーションで可視化したものなどを指します。全体の処理の割合(%)や、ダウンロードサイズ(MBメガバイト)など様々です。他にも進捗バーとも呼ばれることもあります。

プログレスバーイメージ

プログレスバーサンプル

こんな感じのイメージですね。

この記事では、プログレスバーを簡単に実装するためのJavaScriptライブラリ「ProgressBar.js」の使い方を紹介します。

ProgressBar.jsによるプログレスバー実装手順

ここから、ProgressBar.jsの実装手順についてご紹介します。
基本的にコピペでいけるのですごく楽です。

ProgressBar.js導入手順

  • JavaScriptファイルのダウンロード・読み込み
  • HTML・CSS・JavaScriptをコピペ

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

JavaScriptファイルのダウンロード・読み込み

下記リンクにアクセスし、右クリックでダウンロードを選択し、そのままprogressbar.jsという名前でローカルに保存します。
ProgressBar.jsをダウンロードする

保存したprogressbar.jsをサイトをサーバの任意のディレクトリににアップロードします。アップロードしたprogressbar.js<head>内で読み込ませます。

<script type='text/javascript' src='(任意のパス)/progressbar.js'></script>

もしくは、下記コードでGitHub上のJavaScriptファイルを直接読み込ませます。

<script type='text/javascript' src='https://raw.githubusercontent.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js'></script>

これで準備はOKです。

HTML・CSSをコピペ

下記URLにアクセスします。
ProgressBar.js

いくつかサンプルがありますが、まず「LINE」テーマの中から選択して、実装してみます。

LINE

左下の編集アイコンをクリックします。

実行画面
HTML、CSS、JavaScript、実行結果が表示されており、その場でコードを変更して動作確認ができます。

とりあえず、それぞれコピペしてみます。

HTML

<div id="container"></div>

HTMLこの1行のみでOKです。

CSS

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}

バーの幅と高さなどを指定します。

JavaScript

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
	style: {
	  // Text color.
	  // Default: same as stroke color (options.color)
	  color: '#999',
	  position: 'absolute',
	  right: '0',
	  top: '30px',
	  padding: 0,
	  margin: 0,
	  transform: null
	},
	autoStyleContainer: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
	bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});
bar.animate(1.0);  // Number from 0.0 to 1.0

実装イメージ

プログレスバー実装イメージ

コピペだけで実装できました。

各サンプルを紹介

ProgressBar.jsの公式で紹介されているテーマを紹介します。

実装したいサイトのイメージに合致したもの、自分の好みの選んでみてください。

LINE

LINEテーマ

テーマの「LINE」の実装イメージです。
シンプルなライン、ライン+進捗度(%)、ゲージの色変化のパターンなどがあります。

CIRCLE

CIRCLEテーマ

テーマの「CIRCLE」の実装イメージです。
円型のプログレスバーとなっており、シンプルな円、跳ねるエフェクト、円+進捗度のパターンなどがあります。

SEMICIRCLE

SEMICIRCLEテーマ

テーマの「SEMICIRCLE」の実装イメージです。
半円のプログレスバーです。シンプルな半円、半円+進捗度+色変化のパターンなどがあります。

CUSTOM

CUSTOMテーマ

「CUSTOM」の実装イメージです。
公式では、ハートのプログレスバーがサンプルで紹介されています。

まとめ

ProgressBar.jsによるプログレスバー実装手順について再度まとめます。

ポイント

  • ProgressBar.jsのJavaScriptファイルを実装したいサイトで読み込む
  • 使用したいテーマのHTML、CSS、JavaScriptをコピペする

基本コピペするだけでOKで、便利な軽量JavaScriptライブラリなので、使ってみてください。

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

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

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

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