プログレスバー.js

グレーの背景に、進捗を表す領域がブルーで描かれています。現在の進捗は50%を示しています。進捗を表したブルーの領域はグラデーションがかかってきれいに見えます。

プログレスバー.js は、プログレスバーを表示するライトウェイトなJavaScriptライブラリーです。JavaScriptからメソッドを実行することで、パーセンテージの変更などを制御することができます。また、静的に表示させるだけであれば、JavaScriptコードなしに、class属性に値を追加するだけで、プログレスバーを表示することができます。このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。[プログレスバー.jsのサンプル

ダウンロード

Release Date Size (byte) Download
1.0.1 2009-05-28 16,639 progress_1_0_1.zip

対応ブラウザー

  • Internet Explorer 6 以上
  • Firefox 2.0以上
  • Opera 9.0以上
  • Safari 3.0以上(もしかしたら2.0でも動作するかもしれませんが、未確認です。)
  • Google Chrome 0.3以上

使い方

progress_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。プログレスバーを表示させたいHTMLには次のように、div要素を記述しておきます。

<div id="sample"></div>

上記タグは次の点に注意してください。

  • 必ずdiv要素を用意してください。divではない要素ではブログレスバーは表示されません。
  • id属性は必須です。id属性値をセットしてください。

HTMLのhead要素内に、次のJavaScriptコードを記述してください。

<script type="text/javascript" src="../html5jp/progress.js"></script>
<script type="text/javascript">
window.onload = function() {
  var p = {
    to: 50
  };
  var o = new html5jp.progress("sample1", p);
  o.draw();
};
</script>

このサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダ はどこに設置しても構いません。html5jpフォルダの設置場所に合わせてprogress.jsをロードするscript要素のsrc属性を書き換えてください。

プログレスバー描画処理は、progress.jsをロードした後に、script要素内に記述します。プログレスバー描画処理は、jsファイルとしてHTMLファイル と分離しても構いません。しかし、サンプルのように、onloadイベントハンドラを使うなどして、ブラウザがHTMLを読み込んでから処理が実行されるようにしてください。

では、コードをひとつずつ見ていきましょう。プログレスバー描画処理では、まず最初にパラメータをオブジェクトとして用意します。

  var p = {
    to: 50
  };

これは、プログレスバーが50%となるよう指示しています。ここではひとつのパラメータしか定義していませんが、そのほかにも多数のパラメータが用意されています。詳細については後述します。

次に、プログレスバー描画処理オブジェクトを生成します。

var o = new html5jp.progress("sample", p);

ここでは変数名を o としましたが、変数名は何でも構いません。以下、プログレスバー描画オブジェクトの変数名を o として説明します。

オブジェクトを生成する際に2つの引数を与えます。1つ目には、プログレスバーを表示させたいdiv要素のid属性の値です。ここでは "sample" としています。2つ目の引数には、先ほど用意したパラメータを格納したオブジェクトを与えます。

このプログレスバー描画処理オブジェクトには、さまざまなメソッドが定義されています。以降、このオブジェクト o を通して、メソッドを呼び出すことで、プログレスバーを制御します。

オブジェクトが用意できたら、最後に drawメソッドを呼び出します。引数は不要です。

o.draw();

これで、下図のように、id属性値が "sample" のdiv要素に、50% の状態を表すプログレスバーが表示されます。[実際のサンプルを見る

サンプル

パラメータ

プログレスバー描画オブジェクトを生成する際に、第2引数に与えることができるパラメータは下表の通りです。

パラメータ一覧
パラメータ名 初期値 説明
width 300 プログレスバーの横幅を数値として指定します。単位はピクセルです。
height 12 プログレスバーの縦幅を数値として指定します。単位はピクセルです。
full 100 100%に相当する値を指定します。例えば、full に 500 が、to に 300 が指定されると、パーセンテージは自動的に計算され、60% となります。
from 0

プログレスバーを表示する際、fromに指定した値から、to に指定した値に達するまで、アニメーションします。ただし、animation に 0 が指定された場合は、from の値は無視されます。

to 0 プログレスバーに最終的に表示させたい値を指定してください。もし full に 100 以外の値がセットされていると、to の値からパーセンテージは自動計算されます。
animation 5 アニメーション速度。0~10の数値を指定してください。数値が大きいほど、速度が速くなります。0を指定すると、アニメーションしません。
nd 0 パーセンテージの小数点以下の桁数を表します。0~8の数値を指定してください。0を指定すると整数のみがパーセントとして表示されます。ただし、パーセントの数値に小数点以下がない場合は、たとえ nd に 1 以上の値を指定しても、小数点以下は表示されません。
frm_bgc "#cccccc" 背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
frm_bdtc null プログレスバーの枠の上側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
frm_bdrc null プログレスバーの枠の右側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
frm_bdbc null プログレスバーの枠の下側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
frm_bdlc null プログレスバーの枠の左側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
frm_bdw "1px" プログレスバーの枠の線の太さを表します。"1px" のようにpxを付けて指定してください。
bar_bgc "#039ab2" プログレスバーのバーの背景色を色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
bar_bdtc null プログレスバーのバーの上側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
bar_bdrc null プログレスバーのバーの右側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
bar_bdbc null プログレスバーのバーの下側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
bar_bdlc null プログレスバーのバーの左側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
bar_bdw "1px" プログレスバーのバーの線の太さを表します。"1px" のようにpxを付けて指定してください。
per_shw true パーセンテージを表示するかどうかを制御します。表示したい場合は true を、非表示にしたい場合は false を指定してください。
per_ftc "white" パーセンテージ文字の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
per_ftf "Arial,sans-serif" パーセンテージ文字のフォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
per_fts "11px" パーセンテージ文字のサイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
per_sd true パーセンテージ文字の影を表示するかどうかを制御します。表示したい場合は true を、非表示にしたい場合は false を指定してください。
per_sdc "#101010" パーセンテージ文字の影の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
gradation true グラデーションを有効にするかどうかを制御します。有効にしたい場合は true を、無効にしたい場合は false を指定してください。

横幅 400、縦幅 16のサイズで、値が 10.4 から 62.8 に至るまで、速度を 1 (かなりゆっくり)でアニメーションし、パーセントを小数点以下1位まで表示し、バーの色を深紅にしたプログレスバーを作成するには、以下のコードになります。[実際のサンプルを見る

サンプル

var p = {
  width: 400,
  height: 16,
  from: 10.4,
  to: 62.8,
  bar_bgc: "#990000",
  nd: 1,
  animation: 1
};
var o = new html5jp.progress("sample", p);
o.draw();

このように、デフォルト値から変更したいパラメータを指定して、オブジェクトを生成してください。

メソッド

プログレスバー描画オブジェクトには、さまざまなメソッドが定義されています。

メソッド一覧
メソッド 説明
draw() プログレスバーを描画します。このメソッドが呼び出されると、もしすでにプログレスバーが描画されている場合には削除され、その時点のパラメータ値を使って、再度、描画します。
incr(num) 第一引数 num に指定した値を加算します。
decr(num) 第一引数 num に指定した値を減算します。
get_per() 現在のパーセンテージを返します。
get_val() 現在の値を返します。
set_val(val) 第一引数 val に指定した値に、プログレスバーをセットします。
set_param(k, v) 第一引数 k に指定したパラメータ名の値を、第二引数 v に指定した値にセットします。このメソッドで指定できるパラメータ名は、"animation" と "nd" のみです。本来、パラメータは、プログレスバー描画オブジェクトを生成する際にセットするものですが、これら2つのパラメータについては、プログレスバー描画オブジェクトを生成した後でも、このメソッドを使って変更することができます。
reset() プログレスバー描画オブジェクトを生成した際に指定したパラメータを使って、プログレスバーを再描画します。

各メソッドの使い方については、サンプルのHTMLソースをご覧ください。[プログレスバー.jsのサンプル

class属性による静的描画

このライブラリーは、JavaScriptコードを使って動的に描画するだけではなく、div要素のclass属性にパラメータを指定して静的に描画することも可能です。

横幅 400、縦幅 16のサイズで、値が 62.4、アニメーションは無効、パーセントを小数点以下1位まで表示し、バーの色を緑にしたプログレスバーを作成するには、以下のHTMLタグを記述するだけです。head要素内でscript要素を使って progress.js をロードしておく必要はありますが、プログレスバーを描画するためにJavaScriptコードを用意する必要はありません。[実際のサンプルを見る

サンプル

<div id="sample" class="html5jp-progress [width:400;height:16;to:62.4;animation:0;bar_bgc:green;nd:1]">

このdiv要素には、id属性を必ず指定してください。また、class属性には、まず最初に html-jp-progress と記述し、続いて、半角スペースを入れてから [] 内にパラメータ値をセットします。[] 内は、前述のパラメータ表で規定された名前と値を : (コロン)で区切ります。そして、名前と値のペア-を; (セミコロン)で区切ります。[] 内で、半角スペースやダブルクォーテーション、シングルクォーテーションを使わないでください。

バージョンアップ履歴

2009-05-28

  • class属性による静的描画の場合、1ページに1個しかプログレスバーを描画できなかった不具合を改修。

2009-05-14

  • ver 1.0.0 リリース

著作権・謝辞

著作権

Copyright 2007-2012 HTML5.JP

当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。