The progress Element

The Current State of HTML5 Forms

<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
7+

Chrome
6+

Opera
10.6+

IE
10+

Android
4.4+

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.

Our Cookie Policy and Privacy Policy outline how we use cookies to help personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.