HTML <progress> Element

Publish in HTML Tutorial el 25/05/2025 15:11

The <progress> element in HTML is used to represent the completion progress of a task. It provides a visual indication of how much of a task has been completed, typically displayed as a horizontal bar that fills up as the progress increases. This element is commonly used in web applications to show loading status, file uploads, or any process with measurable progress.

The <progress> element supports two main attributes:

value: Specifies how much of the task has been completed. Must be between 0 and max (or 1 if max is not specified).
max: Defines the total amount of work required for the task. If not specified, it defaults to 1.

Basic Syntax

To use the <progress> element, simply define the value and optionally the max attribute:

This will render a progress bar filled to 70% of its total width. Browsers that do not support the <progress> element will display the fallback text inside the tag (e.g., "70%").

Example 1: Simple Static Progress Bar

This example shows a basic progress bar that does not change over time.

Play Code

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

Example 2: Indeterminate Progress Bar

If you don't know the exact progress, you can omit the value attribute to create an indeterminate progress bar (often shown as a moving animation).

Play Code

<progress></progress>

Example 3: Dynamic Progress Bar with JavaScript

In this example, we use JavaScript to update the progress bar's value every second until it reaches 100%.

Play Code

<progress id="progressBar" value="0" max="100"></progress>
<script>
let progressBar = document.getElementById('progressBar');
let i = 0;
let interval = setInterval(() => { 
    if (i >= 100) { 
        clearInterval(interval); 
    } else { 
        i++; progressBar.value = i; 
    }
}, 50);
</script>

Example 4: Manual Progress Update with Button

This example allows users to click a button to increase the progress by 10% each time.

Play Code

<progress id="manualProgress" value="0" max="100"></progress>
<button onclick="increaseProgress()">Increase 10%</button>
<script>
function increaseProgress() { 
    let bar = document.getElementById('manualProgress'); 
    if (bar.value < bar.max) { 
      bar.value += 10; 
    }
}
</script>

Example 5: Multiple Progress Bars with JavaScript Loop

This example dynamically creates 5 progress bars and updates them simultaneously using JavaScript.

Play Code

<div id="barsContainer"></div>
<script>
    const container = document.getElementById('barsContainer');
    for (let i = 0; i < 5; i++) { 
        const bar = document.createElement('progress'); 
        bar.id = `bar-${i}`; 
        bar.value = 0; 
        bar.max = 100; 
        container.appendChild(bar);
    }

    let count = 0;
    let interval = setInterval(() => { 
        if (count >= 100) { 
            clearInterval(interval); 
        } else { 
            count++;  
            for (let i = 0; i < 5; i++) { 
                const bar = document.getElementById(`bar-${i}`); 
                bar.value = count; 
            } 
        }
    }, 30);
</script>

Tips & Tricks

Use the max attribute to scale your progress values accordingly (e.g., for file uploads, set max="100" for percentage-based progress).
Always provide fallback content inside the <progress> tag for browsers that don't support it.
You can style the <progress> element using CSS, but note that styling may vary across browsers due to default user agent styles.
Combine with JavaScript to make dynamic progress indicators for long-running tasks like AJAX requests or animations.
Avoid using the <progress> element for representing static data like statistics; use a custom bar chart instead.