The Current State of HTML5 Forms

The progress Element

<progress max=10 value=0>0%</progress>
<progress max=100 value=25>25%</progress>
<progress max=8 value=4>50%</progress>
<progress max=100 value=75>75%</progress>
<progress max=25 value=25>100%</progress>
<progress>Unknown</progress>

Live Demo

0%
25%
50%
75%
100%
Unknown
Firefox
6+
Safari
5.2+
Safari Mobile
7+
Chrome
6+
Opera
10.6+
IE
10+
Android
4.4+
Supported Supported Supported Supported Supported Supported Supported

Supported Browser Screenshots

Firefox
IE 11

The Low Down

The <progress> element indicates the percentage of completion progress of a task.

  • 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.
  • Attributes include max and value, with progress always being between 0 and 100% complete. The browser calculates the what percentage the value is of the max and adjust the length of the progress bar accordingly.
  • Access the percentage in JavaScript using the <progress> element’s position property, returned as a floating point between 0.0 and 1.0
  • The value should be between 0 and the max value.
  • If no value is included, the progress bar is indeterminate.
  • Chrome, Opera, Safari and Firefox display indeterminate progress as an animated stripe. In IE it's styled as animated dots that slide in and out with easing.
  • Unlike <meter>, it heads only in the direction to the goal of 100% complete.
  • 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.