地味に使えそうなprogressタグ

最近はHTMLを書く機会が減っていることもあり、HTML5で追加された新しい要素のキャッチアップができていないなぁと自覚してはいたのですが、こんな便利(面白そう)なタグが使用できるようになっていたとは知りませんでした。

それがprogressタグです。

<progress>

プログレスバーと言った方が開発者やデザイナー的にはしっくりくるかもしれません。
処理の実行状況等をプログレスバーとして表示することでユーザーに進捗状況をフィードバックできるので離脱防止などに役立ちがちなUIです。

テキストで書いても伝えづらいのでまずは実物をどうぞ。

なんてことはない見た目ですが、地味に感動するポイントがいくつかあります。

CSSを一行も書いてない

これ、CSSを一行も書いていないのにきちんとプログレスバーを表示してくれています。
同じようなUIはdivとその子要素のwidthを調節することで実現できますが、HTMLだけで済むのは地味に感動しました(自分がHTML5知らないおじさんのせいかもですが…)。

max属性とvalue属性で制御できる

この特徴のおかげでVue.jsやReactなどViewを制御するJavaScriptフレームワークとの親和性が高いのも感動ポイントです。

真っ先にこんなことをして遊びたくなりますね。
管理画面系UIで重宝しそうな動きです。

気になるブラウザ対応状況は

まさかのIEもOKでした。
IE9以下も対応されている紳士的なサービスにはお勧めできませんが、今時アプリであれば導入してもよいのではないでしょうか(適当)

ただ、ブラウザごとに見た目が異なってくるので導入するのであればきちんとスタイルを当てて制御した方がよいです。

おわり

ちなみに自分は今制作中のアニメ視聴管理アプリで使用しました。
bulmaを使っているので良い感じの見た目になっていますが、プログレスバーとしてではなくアニメの評価点数を可視化するために利用しました。

私に天使が舞い降りた!は今期最高のアニメだと思います。
ではでは