CodesBeautify

HTML Progress Generator

Create a native progress bar with a value, a maximum, an indeterminate mode and optional styling.

Progress bar HTML60% of 100
<label for="file-progress">Upload progress</label>
<progress id="file-progress" max="100" value="60">60%</progress>
<span class="progress-value">60%</span>
Runs locally in your browser

About the HTML Progress Generator

The progress element gives you a native bar that browsers already announce to assistive technology, without a single div of your own. Set max to the total and value to the amount finished. Leave the value off entirely and the bar becomes indeterminate, the sliding animation that means work is happening but nobody knows how long it will take. This builder handles both modes and refuses a value above the maximum, which is the mistake that silently produces a bar stuck at full.

Text between the opening and closing tags is a fallback for very old browsers and is also what some screen readers read aloud, so the generated code puts the percentage there rather than leaving it empty. The optional stylesheet targets the three selectors you actually need: the element itself, ::-webkit-progress-bar together with ::-webkit-progress-value, and ::-moz-progress-bar. Skip any of them and one rendering engine keeps its default chrome while the other shows your colours.

Use it for uploads, quiz completion, onboarding checklists and download counters. If you want a gauge for a static measurement such as disk usage or a score out of ten, the meter element is the better semantic fit because it describes a level rather than a task in flight. To tidy a page of generated markup afterwards, run it through the HTML Formatter.

How to use

  1. Enter the value and the max that describe your task.
  2. Tick indeterminate when the total is unknown, which drops the value attribute.
  3. Turn on the stylesheet if you want to recolour the bar in every engine.
  4. Copy the markup and update the value from your script as work proceeds.

Common questions

What is an indeterminate progress bar?
It is a bar with no value attribute. The browser animates it to show that something is running when the remaining time cannot be measured.
Why does my styling only work in one browser?
WebKit and Gecko expose different pseudo elements for the bar and the filled portion, so both sets of selectors have to be present.
Should I use progress or meter?
Progress is for a task moving towards completion. Meter is for a measurement inside a known range, such as a rating or remaining storage.
Can the maximum be something other than 100?
Yes. Set max to the number of bytes, files or steps and give value the same unit; the browser works out the proportion.