Progress

Task-completion bar based on <progress>.

A horizontal bar that reports a task's completion against a known total. Always use the native <progress> element — browsers and assistive tech already know what to do with it.

Default

70% 
<label for="upload">Uploading files</label>
<progress id="upload" value="70" max="100">70%</progress>

Steps

Indeterminate

Omit value for unknown-duration tasks; the browser animates a generic "something is happening" state.

<progress max="100"></progress>

Accessibility

Always associate a label via for=""/id="" or an aria-label. The fallback text inside <progress> is shown only if the browser doesn't support the element.