Progress and Meter Elements

<!-- Indeterminate (unknown completion) -->
<progress aria-label="Loading">…</progress>

<!-- Determinate -->
<progress max="100" value="35" aria-label="Upload progress">35%</progress>

<label>
    Upload progress: <progress max="100" value="35"></progress>
</label>

<!-- Meter — value within a range (different semantics from progress!) -->
<label>
    Disk usage:
    <meter min="0" max="500" low="100" high="400" optimum="200" value="320">320 / 500 GB</meter>
</label>

<label>
    Password strength:
    <meter min="0" max="4" value="3" low="2" high="3" optimum="4">Strong</meter>
</label>

<!-- meter color-codes itself based on (low / high / optimum):
     value < low      → "low" color (red-ish)
     value > high     → "high" color (red-ish if optimum is low, green if optimum is high)
     low ≤ value ≤ high → "OK" color
     The browser picks colors — style only if you really need to override. -->