Progress (<progress>)

When to use 

Use the <progress> element to indicate the progress of a task. ¹

Rules

• The <progress> element can indicate an indeterminate state when it‘s not clear what the progress is or a progress between zero and the specified maximum. ¹
• When representing scalar values that do not represent a progress use the <meter> element instead. ¹
• You should provide an accessible name. The most reliable method is explicitly using the <label for="<id>"> element and associating it via the "for" attribute. Otherwise use aria-labelledby or aria-label. ²
• Include a textual representation of the current value of the progressbar inside the <progress> element, in case that the user agent does not support the progress element. ¹ This textual representation is not used for the computation of the accessible name.
• To indicate the loading progress of a specific section of a page using the <progress> element, utilize the aria-describedby attribute to refer to the status, and set aria-busy="true" on the corresponding section that is undergoing updates. Once the loading is complete, remove the aria-busy attribute. ²
• If it increases the usability of the progress task you can use a surrounding live-region for progress changes to be announced. ³

Examples

<label for="loadingProgressElement"> Loading Progress:</label> <progress id="loadingProgressElement" max="100" value="30">30%</progress>

Loading Progress: 30%

Sources 

1. HTML Spec: 4.10.13 The progress element is licensed under Creative Commons Attribution 4.0 International License
2. MDN: <progress>: The Progress Indicator element by Mozilla contributors is licensed under CC-BY-SA 2.5
3. MagentaA11y: Progress indicator by T-Mobile