The Current State of HTML5 Forms

The progress Element

<progress max=100 value=50>50%</progress>

Live Demo

50%
Firefox
6+
Safari
5.2+
Safari Mobile
5-
Chrome
6+
Opera
10.6+
IE
10+
Android
2.3+
Supported Supported No support Supported Supported Supported No support

Supported Browser Screenshots

Chrome 10
Opera 11
Safari 5.2 - indeterminate state
IE 10 - indeterminate state

Unsupported Browser Screenshots

Firefox 3.6

The Low Down

The progress element indicates the percentage of completion of something.

  • Possible uses: show uploading progress of a file (non-trivial, but doable) or showing how far to completion a user is to completing a multi page form.
  • Progress bar will desaturate when browser window not in focus (tested Chrome 10 & 13)
  • Defaults to inline-block so you can set width/height. Height will not change actual height of stylized bar (unlike meter) but will add space below.
  • Only has max and value attributes (progress is always between 0 and 100% complete).
  • Without min and max attributes, the progress bar will be in "indeterminate" state. In Chrome 12+/Safari 5+ styled as animated stripes. In IE 10 styled as little dots that slide in and out with easing.