Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

HTML5新要素 progress

概要

progressタグについて説明します。

内容

progressは進行状況の表示します。

属性として以下の利用が可能です
max = 最大値を設定
value = 現在の進捗状況
form = どのフォームに関わっているか

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>progress</title>
  </head>
  <body>
  <form action="">
    progress:<progress id="range" value="20" max="100" >現在20%読み込み中</progress>
  </form>
  </body>
</html>

完成画面のキャプチャ

2012/03/20現在、GoogleChromeFireFoxOperaはprogressに対応

InternetExplorer9で表示した場合
※後ほど画像アップロード予定