HTML Progress Generator

HTML Progress Generator

The <progress> element shows how far a task has advanced: a file upload, a download, an installation, a multi-step form or a reading position. It is rendered as a native progress bar by every browser and exposes its value to screen readers, so you do not need to build one from nested divs. The HTML Progress Generator creates the markup in seconds.

Options

• value – how much of the task is complete. Values above max are clamped so the code stays valid.
• max – the total amount of work. Use 100 for percentages, or the real total such as the number of bytes or steps.
• Indeterminate – leaves out value, which turns the bar into an animated "loading" indicator for tasks of unknown length.
• Label and id – an accessible <label for> connected to the bar.

The text between the tags (for example 40%) is a fallback for very old browsers and a useful hint when reading the source.

Progress vs. meter

Use <progress> for anything moving toward completion. For a static measurement within a range — disk usage, a rating, a battery level — use <meter> instead; it supports low/high thresholds and color states. Our HTML Meter Generator builds that element.

Updating it with JavaScript

In real applications the value changes over time. Set element.value from an upload's progress event or after each step of a wizard. Style the bar with accent-color for a quick brand color, or use vendor pseudo-elements for full control. To give the surrounding card some depth, see the CSS Box Shadow Generator.