【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.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を記述するだけで動作します。
かなりシンプルですね。
実装イメージ
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日分を取得した話
おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果