<progress> represents completion of a task. The value is between zero and max, which defaults to 1. Omitting value makes it indeterminate; there is no min attribute.
A working example
HTML and CSS
HTML
<label for="task">Example task progress</label
><progress id="task" value="2" max="5">2 of 5</progress>
<p>2 of 5 steps complete.</p>CSS
/* Optional presentation */
label {
display: block;
margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
font: inherit;
max-width: 100%;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Use it in a form
A real application should update the value from actual completed work. To switch to an unknown duration, remove value rather than setting it to zero. A still-visible status helps explain what is happening.
Common mistakes and accessibility
Text inside progress is not a reliable accessible label. Supply a label or an appropriate accessible name. Do not fabricate completion from a timer. Use meter for a scalar measurement such as storage usage.
Continue with meter for the related behavior.
Sources and browser support
MDN: progress describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.