処理中を知らせるためのプログレスバーは大事な存在です。最近ではYouTubeなどでウィンドウ上部に読み込み中のステータスバーを出すといったUIも採用されています。いずれにしても無反応な状態を回避するのはユーザストレス軽減につながるはずです。 ステータスバーを表示するライブラリは幾つかありますが、今回はprogre(c)ss!というソフトウェアを紹介します。一本線のとてもシンプルなステータスバーライブラリです。

progre(c)ss!の使い方

progre(c)ss!はその名の通り、スタイルシートだけで作られています。なのでスタイルシートを読み込んだら、後はHTMLで次のような記述をするだけです。

<div class="progrecss" data-progrecss="77">
  My first progre(c)ss!
</div>

ちなみにスタイルシートファイルを見ると1ポイントごとにスタイルシートが記述されています。これは非常に面倒に見えますが、LESSファイルがベースになっており、そちらではループ処理を使っているので非常に短く、メンテナンスも簡単です。面白い使い方です。

progre(c)ss!デモ

CSS3のアニメーションも使われているので、プログレスバーが伸びていくのも簡単に実現しています。簡易的なプログレスバーとして使ってみると面白そうです。

progre(c)ss!はスタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。

progre(c)ss! jh3y/progre-c-ss