Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<progress value="70" max="100"><meter value="0.7" min="0" max="1">Current completion amount (between 0 and max)
<progress value="65" max="100">Maximum value when task is complete
<progress value="65" max="100"><progress> without a value attribute.Current value of the measurement
value="0.7"Minimum value (default: 0)
min="0"Maximum value (default: 1)
max="1"Upper boundary of low range
low="0.3"Lower boundary of high range
high="0.8"Optimal value for the gauge
optimum="0.5"low, high, and optimum values (green for optimal, yellow for suboptimal, red for critical).Upload progress: 45/100 MB
Downloading... 78%
Step 3 of 5 completed
Processing your request...
75 GB used of 100 GB
Battery: 42% remaining
CPU usage: 68%
Score: 8.5 out of 10
See how progress and meter elements work with various examples and styling
Progress bar showing specific completion percentage with file upload example
<div class="progress-container">
<label for="upload-progress">File Upload Progress</label>
<progress id="upload-progress" value="65" max="100"></progress>
<span class="progress-label">Uploading... 65 MB of 100 MB (65%)</span>
</div>
<p class="note">⏳ Progress bar shows determinate state with specific value</p>Loading preview...
Progress bar without value attribute shows indeterminate/loading state
<div class="progress-container">
<label for="loading-progress">Processing Request</label>
<progress id="loading-progress"></progress>
<span class="progress-label">Please wait...</span>
</div>
<p class="note">⏳ Progress without value creates animated loading indicator</p>Loading preview...
Meter element showing disk usage with color zones based on optimum value
<div class="meter-container">
<label for="disk-meter">Disk Storage</label>
<meter
id="disk-meter"
value="75"
min="0"
max="100"
low="60"
high="80"
optimum="20">
</meter>
<span class="meter-label">75 GB used of 100 GB (75% full)</span>
</div>
<p class="note">💾 Meter shows red because value is high and optimum is low</p>Loading preview...
Meter showing battery level where higher values are better
<div class="meter-container">
<label for="battery-meter">Battery Level</label>
<meter
id="battery-meter"
value="0.42"
min="0"
max="1"
low="0.2"
high="0.8"
optimum="0.9">
</meter>
<span class="meter-label">42% remaining (charging recommended)</span>
</div>
<p class="note">🔋 Meter shows yellow because value is medium and optimum is high</p>Loading preview...
Meter for ratings where middle range is optimal
<div class="meter-container">
<label for="score-meter">Performance Rating</label>
<meter
id="score-meter"
value="8.5"
min="0"
max="10"
low="4"
high="9"
optimum="7">
</meter>
<span class="meter-label">8.5 out of 10 - Excellent performance!</span>
</div>
<p class="note">⭐ Meter shows green because value is near optimal range</p>Loading preview...
aria-label for accessibilitylow/high/optimum for metersmax attribute<progress> and <meter> have been supported since 2011-2012 in all major browsers!Play around with progress bars and meter gauges