Progress and Meter

Progress bars, meters, loading indicators, and visual feedback.

Overview

<progress> and <meter> provide visual feedback elements.

Key Concepts

• Progress — Unknown completion progress
• Meter — Known value within range
• Indeterminate — No known value
• Styling — Custom appearance
• Accessibility — Screen reader support

Code Examples

<!-- Progress bar -->
<progress id="progress" value="0" max="100"></progress>
<span id="progressText">0%</span>

<!-- Indeterminate progress -->
<progress id="indeterminate"></progress>

<!-- Meter -->
<meter id="meter" min="0" max="100" low="33" high="66" optimum="50" value="50">
  50%
</meter>

<!-- Color-coded meters -->
<meter value="20" low="33" high="66" optimum="50" min="0" max="100">20%</meter>
<meter value="50" low="33" high="66" optimum="50" min="0" max="100">50%</meter>
<meter value="80" low="33" high="66" optimum="50" min="0" max="100">80%</meter>

<button id="startProgress">Start Progress</button>

<script>
const progress = document.getElementById('progress');
const progressText = document.getElementById('progressText');

document.getElementById('startProgress').addEventListener('click', () => {
  let value = 0;
  const interval = setInterval(() => {
    value += 5;
    progress.value = value;
    progressText.textContent = `${value}%`;
    
    if (value >= 100) {
      clearInterval(interval);
      progressText.textContent = 'Complete!';
    }
  }, 100);
});
</script>

<style>
progress {
  width: 200px;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: #e0e0e0;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background: #007bff;
  border-radius: 10px;
  transition: width 0.3s ease;
}

progress::-moz-progress-bar {
  background: #007bff;
  border-radius: 10px;
}

meter {
  width: 200px;
  height: 20px;
  border-radius: 10px;
}

meter::-webkit-meter-optimum-value {
  background: #28a745;
  border-radius: 10px;
}

meter::-webkit-meter-suboptimum-value {
  background: #ffc107;
  border-radius: 10px;
}

meter::-webkit-meter-even-less-good-value {
  background: #dc3545;
  border-radius: 10px;
}
</style>

Practice

Create a file upload progress indicator with animated progress bar.