The Low Down
<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
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.
positionproperty, returned as a floating point between 0.0 and 1.0
valueshould be between 0 and the
- If no
valueis 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.
<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.