Industrial.jsは体温計やタンクなどでの進捗表示ができるライブラリです。

処理の進捗を表すのにプログレスバーがよく使われますが、今回はメータグラフを使った手法を紹介します。利用するライブラリはIndustrial.jsです。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.09.57_thumb.1368593349.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.09.57.1368593349.png)
メーター表示です。液体や温度計風で面白いです。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.10.11_thumb.1368593353.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.10.11.1368593353.png)
その他LED、電光掲示板風もあります。

Industrial.jsではタンク、温度計、LED、電光掲示板、ゲージと種類が用意されています。いわゆる工業系の計測機器、出力機器を模しています。それぞれJavaScriptで指定するだけで使えるので手軽です。素材などを用意する必要もないので、プログレスバーの代わりに適用することも考えられるでしょう。

Industrial.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

リアル、ネットに限らず顧客がいら立つのは自分が放置されていると感じた時です。特にWebにおいては対面がコンピュータであるためにいつでも打ち切ることができます。それだけに常に顧客のことを気にしているという印象を与えなければなりません。

読み込み中が続くと切られてしまうのはそのせいです。処理中になったらインジケーターやローディングを出す工夫が必要です。処理状態の数値が出せるのであればグラフやIndustrial.js、プログレスバーを使って進捗を目に見える形にする工夫が必要でしょう。

Industrial.js

Valdez42/industrial-js · GitHub