【lineProgressbar.js】軽量プラグインによるプログレスバーの実装方法
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.cssjquery.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を記述するだけで動作します。
かなりシンプルですね。
実装イメージ
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コードを記述
- 必要に応じて用意されたオプションを設定する
軽量なのに用意されているオプションも多いので、おすすめです。
プログレスバー実装方法まとめ
Webページでプログレスバーを実装する8つの方法まとめ
mineblogでプログレスバーの実装方法をいくつか紹介してきました。各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果