MENU

Progress and Meter

<progress> displays a progress indicator
....... max=number: the total amount of work
...... value=number: the amount of work done.

<meter> displays a scalar indicator
....... form=form_id
...... high= number
...... low= number
...... max= number
...... min= number
...... optimum= number
...... value= number

Without a value attribute, the progress bar indicator simply moves back and forth indefinitely.
The meter bar changes its color when the value is less than 'low' or more than 'high'.

See the Pen Untitled by Web Coding Center (@webcodingcenter)on CodePen.

With some JavaScript, you can animate the progress bar as you wish.

See the Pen Untitled by Web Coding Center (@webcodingcenter)on CodePen.