<progress>

Definition and Usage

The <progress> tag represents the completion progress of a task, such as a download or file upload.

The <progress> tag is not suitable for representing a gauge (e.g., disk space usage). For gauges, use the <meter> tag instead.

The progress element can be used in two states:

• Determinate: Shows specific progress (when both value and max are specified)
• Indeterminate: Shows activity without specific progress (when only max is specified or no attributes)

Attributes

The <progress> tag also supports the Global Attributes in HTML.

The <progress> tag also supports the Event Attributes in HTML.

Examples

Basic Progress Bar

Create a simple progress bar showing 70% completion:

<label for="file">Downloading progress:</label>
<progress id="file" value="70" max="100">70%</progress>

Indeterminate Progress

Show activity without specific progress (no value attribute):

<label for="loading">Loading...</label>
<progress
  id="loading"
></progress>

File Upload Progress

Display file upload progress with percentage:

<p>Uploading file: <span id="percent">0</span>%</p>
<progress id="upload-progress" value="0" max="100">0%</progress>

<script>
  let progress = 0;
  const progressBar = document.getElementById('upload-progress');
  const percentText = document.getElementById('percent');

  const interval = setInterval(() => {
    progress += 10;
    progressBar.value = progress;
    percentText.textContent = progress;

    if (progress >= 100) {
      clearInterval(interval);
    }
  }, 500);
</script>

Download Progress with JavaScript

Simulate a download with dynamic updates:

<p>Download progress: <span id="status">Starting...</span></p>
<progress id="download" value="0" max="100"></progress>
<button onclick="startDownload()">Start Download</button>

<script>
  function startDownload() {
    const progress = document.getElementById('download');
    const status = document.getElementById('status');
    let value = 0;

    const download = setInterval(() => {
      value += Math.random() * 10;

      if (value >= 100) {
        value = 100;
        status.textContent = 'Complete!';
        clearInterval(download);
      } else {
        status.textContent = Math.floor(value) + '% downloaded';
      }

      progress.value = value;
    }, 300);
  }
</script>

Styled Progress Bar

Customize the appearance using CSS:

<style>
  progress {
    width: 100%;
    height: 30px;
    border-radius: 15px;
  }

  /* WebKit browsers (Chrome, Safari) */
  progress::-webkit-progress-bar {
    background-color: #f0f0f0;
    border-radius: 15px;
  }

  progress::-webkit-progress-value {
    background: linear-gradient(90deg, #745af2, #667eea);
    border-radius: 15px;
  }

  /* Firefox */
  progress::-moz-progress-bar {
    background: linear-gradient(90deg, #745af2, #667eea);
    border-radius: 15px;
  }
</style>

<label for="styled">Styled progress:</label>
<progress id="styled" value="65" max="100">65%</progress>

Multiple Progress Bars

Track multiple tasks simultaneously:

<div>
  <p>Task 1: Image Processing</p>
  <progress value="45" max="100">45%</progress>
</div>

<div>
  <p>Task 2: Data Upload</p>
  <progress value="80" max="100">80%</progress>
</div>

<div>
  <p>Task 3: Compression</p>
  <progress value="20" max="100">20%</progress>
</div>

Animated Progress with Color Changes

Create an animated progress bar that changes color:

<style>
  .color-progress {
    width: 100%;
    height: 25px;
  }

  .color-progress::-webkit-progress-value {
    transition: width 0.5s ease;
  }

  .low::-webkit-progress-value {
    background-color: #f44336;
  }

  .medium::-webkit-progress-value {
    background-color: #ff9800;
  }

  .high::-webkit-progress-value {
    background-color: #4CAF50;
  }
</style>

<progress id="color-bar" class="color-progress low" value="25" max="100">25%</progress>

<script>
  const bar = document.getElementById('color-bar');
  let val = 25;

  setInterval(() => {
    val = (val + 5) % 100;
    bar.value = val;

    if (val < 33) {
      bar.className = 'color-progress low';
    } else if (val < 66) {
      bar.className = 'color-progress medium';
    } else {
      bar.className = 'color-progress high';
    }
  }, 500);
</script>

Progress vs Meter

Understanding the difference between <progress> and <meter>:

Styling Progress Bars

Different browsers use different pseudo-elements for styling:

• WebKit/Blink (Chrome, Safari, Edge):
  • ::-webkit-progress-bar - Styles the background/track
  • ::-webkit-progress-value - Styles the filled portion
• Firefox:
  • ::-moz-progress-bar - Styles the filled portion

Accessibility Considerations

• Always provide text content between the opening and closing tags as a fallback for older browsers
• Use aria-label or associate with a <label> to describe what's progressing
• Update aria-valuenow, aria-valuemin, and aria-valuemax for dynamic updates
• Consider providing a text update alongside the visual progress bar
• For indeterminate progress, use aria-busy="true" on the container

Try it Yourself

Best Practices

• Use <progress> for tasks that are in progress and will complete
• Provide fallback text content between the tags for older browsers
• Always label progress bars with descriptive text
• Update progress values with JavaScript for dynamic tasks
• Use indeterminate state (no value) when duration is unknown
• Combine with aria-label or <label> for accessibility
• Show percentage text alongside the progress bar for clarity
• Test styling across different browsers for consistent appearance
• Don't use for static measurements - use <meter> instead

Default CSS Settings

Most browsers will display the <progress> element with the following default values:

progress {
  display: inline-block;
}

Related Tags

• <meter>

  Defines a scalar measurement within a range

• <input>

  Defines an input control

• <output>

  Defines the result of a calculation

• <label>

  Defines a label for form elements

• <form>

  Defines an HTML form