ロードインジケータ表示を簡単に実装するJavaScript （protoload.js）

Ajaxなど非同期処理やタイマーイベントを利用して、コンテンツ上で処理を行う際にロードインジケータやプログレスバーなどのアニメーション表示がわかりやすい。インジケータの表示処理を簡単に実装出来るようにしてくれるのがprotoload.js。

インジケータの表示開始と終了をJavaScriptで呼び出せばよいので非常に簡単に利用できる。利用するにはHTMLヘッダなどでprotoload.jsを呼び出しておく必要がある。表示コンテンツの要素に対してレイヤー表示されるので、非表示領域に対しては利用できない。

prototype.jsが必要
利用する上でprototype.jsフレームワークが必要になるので、別途ダウンロードする必要がある。実際に利用するには下記のように利用すれば良い。classNameを指定した場合、表示されるレイヤーのclass=""として割り当てられる。

startWaiting()、stopWaiting()のFunctionはObject.protorypeとして追加されるため、getElementById等で取得したオブジェクトなどに適用することが出来る。

JavaScriptファイル以外にも、スタイルシートやインジケータ用のGIFも必要になる。CSSデザインやGIFを変更する場合はサンプルを参考にしてみてください。