処理に時間がかかっている時にプログレスバーを出せばユーザストレスは幾分軽減できます。幾つものプログレスバーライブラリがありますので、目的に合わせて選ぶのが良いでしょう。 今回のProgress.jsはサイト全体はもちろん、画像などの一部の描画を行っている時に使ってみると面白そうなライブラリです。

Progress.jsの使い方

Progress.jsのJavaScript/スタイルシートファイルを読み込んだ上で、スタートを実行します。

//to set progress-bar for whole page
progressJs().start();
//or for specific element
progressJs("#targetElement").start();

Progress.jsのデモ

読み込み中。プログレスバーごとに速度を変えられます。

表示されました！

テキストエリアの文字数をプログレスバーで表示するデモです。

操作を動画にしたデモはこちら。

テキストエリアやテキストボックスの上にプログレスバーを出すというのはYouTubeのページ移動の時のようで面白い使い方ではないでしょうか。ユーザがストレスを感じないようにするための仕組みづくりを考えたいですね。

Progress.jsはJavaScript/CSS3製のオープンソース・ソフトウェアです。

Progress.js - Themeable progress bar library usablica/progress.js