Open navigation menu

Progress and Meter Elements

Uses native progress and meter elements to display completion status and scalar measurements with proper accessibility attributes.

HtmlFile Upload

Code

snippet
<!-- Indeterminate progress -->
<label for="loading">Loading...</label>
<progress id="loading" aria-label="Loading data"></progress>

<!-- Determinate progress -->
<label for="upload">Upload progress:</label>
<progress id="upload" value="70" max="100" aria-label="File upload progress">
  70%
</progress>

<!-- Step progress -->
<div role="progressbar"
     aria-valuenow="3"
     aria-valuemin="1"
     aria-valuemax="5"
     aria-label="Checkout step 3 of 5">
  Step 3 of 5
</div>

<!-- Meter for scalar values -->
<label for="disk">Disk usage:</label>
<meter id="disk" value="0.65" min="0" max="1" low="0.5" high="0.8" optimum="0.2">
  65%
</meter>

<label for="battery">Battery:</label>
<meter id="battery" value="45" min="0" max="100" low="20" high="50" optimum="100">
  45%
</meter>

<label for="score">Test score:</label>
<meter id="score" value="85" min="0" max="100" low="40" high="70" optimum="100">
  85 out of 100
</meter>

<style>
  progress {
    width: 100%;
    height: 20px;
    border: none;
    border-radius: 10px;
  }
  progress::-webkit-progress-bar {
    background: #e0e0e0;
    border-radius: 10px;
  }
  progress::-webkit-progress-value {
    background: #4CAF50;
    border-radius: 10px;
    transition: width 0.3s;
  }
</style>

Related Examples