JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）

Ajaxなど非同期処理などプログレスバーを表示させたいと思うことがある。しかし、実装の手間や開発期間を考えると、進行状況を表示するだけのプログレスバーに時間をかけたくない。簡単にプログレスバーを実装できるのがjsProgressBarHandler。

デフォルトのプログレスバーデザインも良く、ダウンロードファイルに必要なものが含まれているので、すぐに実装が出来る。動作には、prototype.jsが必要となる。プログレスバーの％値を動的に変更するにはJavaScritpで値を指定するだけでよい。

色とデザインの変更
デフォルトのデザインでも4色用意されている。プログレスバーを表示するCSSの背景画像として指定するだけで変更が可能になる。

プログレスバーのデザイン変更やサイズ変更をする場合は、付属のイメージファイルを元に任意のサイズ・デザインのものを作成する必要がある。バーの枠デザインは透過PNGとして作成する必要がある。

非同期処理を利用する機会があれば、プログレスバーの実装にチャレンジしていただきたい。また、非同期処理でなくても、時間のかかるJavaScript処理などでも、任意のタイミングで進行状況を変化させることが出来るので、さまざまな場面で利用できる。