【lineProgressbar.js】軽量プラグインによるプログレスバーの実装方法

Programming Web

Web制作者

Web制作者
「Webページに簡単なプログレスバーを実装したいから、便利で軽量なjQueryプラグインとか無いかな?」

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

本記事の内容

  • lineProgressbar.jsでプログレスバーを実装する方法
  • lineProgressbar.jsのオプション紹介
  • lineProgressbar.jsの実装サンプル

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

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

Webページ上であるいくつかのデータを可視化したい時に、プログレスバーで表現することがしばしばあります。

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

こんな感じの表示です。

フリーで配布されているjQueryプラグインは色々ありますが、今回はlineProgressbar.jsという軽量jQueryを導入してプログレスバーを実装する方法を紹介します。

lineProgressbar.jsによるプログレスバー実装方法

lineProgressbar.jsによるプログレスバーの実装方法を詳しく説明します。

実装手順

  • jQuery読み込み
  • 必要なファイルをダウンロード・読み込み
  • 各種コードを記述

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>

必要なファイルをダウンロード・読み込み

まず、下記リンクにアクセスします。
» jquery.lineProgressbar.js

ダウンロードをクリック

右上のDownloadをクリックして、lineProgressbar.jsの実装に必要なファイルをダウンロードします。LineProgressbar-master.zipという名前のzipファイルをダウンロードできたら、解凍します。

使用するファイルは下記の2つです。

使用するファイル

  • jquery.lineProgressbar.css
  • jquery.lineProgressbar.js

使用するファイルを、サイトを運営しているサーバーの任意の場所へアップし、<head>内にファイルを読み込むコードを記述します。

<head>内へ記述するコード

<link rel="stylesheet" href="(任意のパス)/jquery.lineProgressbar.css" />
<script src="(任意のパス)/jquery.lineProgressbar.js"></script>

これで準備はOKです。

各種コードを記述

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

HTML

<div id="progressbar1"></div>

HTMLはたった1行でもOKです(デフォルト)。

JavaScript

$('#progressbar1').LineProgressbar(); 

デフォルト設定であれば、上記のJavaScriptを記述するだけで動作します。
かなりシンプルですね。

実装イメージ

デフォルトはバーの色はブルーで、ゲージは100%に設定されています。

lineProgressbar.jsのオプション

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

設定できるオプション

オプション 単位 デフォルト 詳細
percentage 数値 100 表示する割合(パーセンテージ%)
ShowProgressCount boolean true 数値の表示切り替え
(true:表示/false:非表示)
animation boolean true プログレスバーのアニメーションの有無切り替え
(true:あり/false:なし)
unit 文字列 % プログレスバーの単位の指定
(km/hなど)
duration 数値or文字列 1000 プログレスバーの進行速度の指定
ミリ秒(100, 1000, 5000のような感じ)
‘slow’
‘fast’
fillBackgroundColor 文字列 ‘#3498db’ プログレスバーの色
backgroundColor 文字列 ‘#EEEEEE’ プログレスバーの背景
radius 文字列 ‘0px’ 角丸の設定
height 文字列 ’10px’ プログレスバーの高さ
width 文字列 ‘100%’ プログレスバーの幅

設定変更したサンプル

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

サンプル1

下記リストを設定して、プログレスバーを実装します。

サンプル1の設定

  • パーセンテージ
  • プログレスバーの背景
  • プログレスバーの色
  • プログレスバーの高さ
  • プログレスバーの幅

実装イメージ

JavaScript

$('#progressbar').LineProgressbar({
	percentage: 80,
	backgroundColor: '#f3dfcd',
	fillBackgroundColor: '#e67e22',
	height: '30px',
	width: '50%'
});
プログレスバーの色や大きさをだいたい設定可能です。

サンプル2

下記リストを設定して、プログレスバーを実装します。

サンプル2の設定

  • パーセンテージ
  • プログレスバーの色
  • プログレスバーの高さ
  • 角丸
  • 数値非表示

実装イメージ

JavaScript

$('#progressbar3').LineProgressbar({
	percentage: 60,
	fillBackgroundColor: '#f1c40f',
	height: '30px',
	radius: '15px',
	ShowProgressCount: false
}
ShowProgressCount: falseを設定することで、右下の数値を非表示にできます。

まとめ

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

ポイント

  • jQueryを読み込む
  • lineProgressbar.jsファイルを読み込む
  • 必要なHTML、JavaScriptコードを記述
  • 必要に応じて用意されたオプションを設定する
ほんの数分で、簡単コピペで実装できます。
軽量なのに用意されているオプションも多いので、おすすめです。

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


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

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

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