Cloud Cloud Cloud Cloud

The progress Element

The Current State of HTML5 Forms

Let Wufoo do the hard work. Sign up for a free account and start making forms the easy way.

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.
Cloud Cloud Cloud Cloud

Let Wufoo do the hard work.

Sign up for a free account and start making forms the easy way.