, ,

wordpress プラグインやjQueryを使わずに進捗バーを作る

progress タグについて

<progress> タグを使うと簡単に進捗バーを作ることができます。
このタグはHTML5から追加されたタグになります。

進捗状況ではない場合(HDDの使用料とか)は <progress>タグは推奨されておらず、その場合は <meter> タグを使用するとよいみたいです

ブラウザサポートは以下から確認できます
https://caniuse.com/#feat=progress

基本

<progress value="0" max="100">0%</progress> 0%
0% 0%

500 件中 80 件終わった場合の表記サンプル

<progress value="80" max="500">80/500</progress> 80/500
80/500 80/500

Categorised in: , ,