jQuery UI - プログレスバー

処理の進捗状況を示す場合には、プログレスバーを表示した方が親切である場合があります。

最近の傾向としては Web の場合はサーバー側で行う処理時間の長い処理の途中経過を示すのは、現在何パーセントという風に表示するのではなく、 "Please wait" 程度にとどめておきグルグルまわるアイコンを表示。ビジネスロジックとして、現在何パーセント（例えばソーシャルサイトやデートサイトのプロフィール入力状況など) という進捗を示したい場合に、プログレスバーを表示、という場合が多いように思います。

いずれにせよ、上手にプログレスバーも使いたいものです。

jQuery プログレスバーウィジェットの基本的な使用方法

プログレスバーを使うのは簡単です。多くの他のウィジェットと同様に、div 要素に対して progressbar() を呼び出せば OK です。

デフォルトで最小値 0、最大値 100 で、その値には value を通してアクセスできます。

ここでは初期値として 5 を設定して、ボタンをクリックする度に値をインクリメントしています。

$(document).ready( function() {

var v = 5;

$('#pbdemo1').progressbar({
  value: v
});

$('#button1').click(function(){
  $('#pbdemo1').progressbar('value', ++v);
});

});