How to create progress bar in html

HtmlHow-ToBeginner · 3 min read

How to Create a Progress Bar in HTML: Simple Guide

You can create a progress bar in HTML using the <progress> element, which shows progress visually. Set its value attribute to the current progress and max attribute to the total amount to track progress.

📐

Syntax

The <progress> element displays a progress bar. It has two main attributes:

value: The current progress amount.
max: The total amount representing 100% progress.

When value is less than max, the bar shows partial progress. If value equals max, the bar is full.

html

<progress value="30" max="100">30%</progress>

Output

A horizontal progress bar filled about 30% with the text '30%' inside or next to it depending on the browser.

💻

Example

This example shows a progress bar at 70% completion. It uses the <progress> element with value="70" and max="100". The bar visually fills 70% of its width.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress Bar Example</title>
</head>
<body>
  <h2>Download Progress</h2>
  <progress value="70" max="100">70%</progress>
</body>
</html>

Output

A page with a heading 'Download Progress' and a horizontal progress bar filled about 70%.

⚠️

Common Pitfalls

Common mistakes when creating progress bars include:

Not setting the max attribute, which defaults to 1 and can make the bar appear full or empty unexpectedly.
Using values greater than max, which can cause the bar to overflow or behave oddly.
Not providing fallback text inside the <progress> element for browsers that don't support it.

Always ensure value is between 0 and max and include descriptive text for accessibility.

html

<!-- Wrong: missing max attribute -->
<progress value="50">50%</progress>

<!-- Right: with max attribute -->
<progress value="50" max="100">50%</progress>

Output

The first progress bar may appear full or empty depending on browser because max defaults to 1; the second bar correctly shows 50% progress.

📊

Quick Reference

Attribute	Description	Example
value	Current progress amount	value="40"
max	Maximum progress amount (100% complete)	max="100"
Fallback text	Text shown if progress bar is unsupported	30%
Accessibility	Use descriptive text for screen readers	e.g., 'Loading 30%'

✅

Key Takeaways

Use the element with value and max attributes to create a progress bar.

Always set max to define the total progress scale; default is 1 which can cause confusion.

Keep value between 0 and max to show correct progress visually.

Include fallback text inside for accessibility and unsupported browsers.

Test your progress bar in different browsers to ensure consistent appearance.