<progress> and <meter>

progress is for tasks

<progress> answers one question: how far along is this task? Give it a max (defaults to 1) and a value, and the browser draws a fraction of the bar — <progress max="100" value="40"> is 40% full. The text between the tags (<progress value="40" max="100">40%</progress>) is a fallback for very old user agents; modern browsers draw the bar and ignore it, but it keeps the element meaningful in assistive tech.

Omit value entirely and the element becomes indeterminate: the browser shows an animated "working, don't know how long" bar. That's the right state for "we've started but can't measure progress yet." Set value once you can, and it flips to a determinate fill.

meter is for measurements

<meter> is not a progress bar. It represents a scalar value within a known range — disk usage, a score, a temperature, a relevance rating. It takes min, max, and value, plus three optional thresholds: low, high, and optimum. The browser uses those to colour the gauge: a value in the "good" zone renders green, a "less good" zone yellow, and a "bad" zone red, all decided relative to where optimum sits.

The thresholds carve the range into low / medium / high bands. If optimum falls in the low band, then low is good (green) and high is bad — perfect for "fuel remaining." If optimum falls in the high band, the colours invert — perfect for "signal strength." Reach for <meter> whenever the value isn't a task completing over time.

Updating from JavaScript

Both elements expose value (and max) as live DOM properties, so a real upload or download just assigns bar.value = bytesLoaded. To reflect that to screen readers, mirror the number into aria-valuenow or the element's text. Because the bar is a real form element, you style it with ::-webkit-progress-bar, ::-webkit-progress-value, and ::-moz-progress-bar — no library required.