The progress Element

Live Demo

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.