• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Progress bar

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/progressbar@1.0.0-beta.2

Variants


Standard
Contribution

Loading
50%
Loading
50%
Loading
50%
Loading
50%
Show markup
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-ProgressBar" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
    </div>
    <div class="spectrum-ProgressBar-label" hidden=""></div>
  </div>
</div>

<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
    </div>
    <div class="spectrum-ProgressBar-label" hidden=""></div>
  </div>
</div>

<div style="margin: 20px 0;">
  <div class="spectrum-ProgressBar" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-ProgressBar-percentage">50%</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

<div style="margin: 20px 0;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-ProgressBar-percentage">50%</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

<div style="margin: 50px 0;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--small spectrum-ProgressBar--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-ProgressBar-percentage">50%</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

<div style="margin: 20px 0;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-ProgressBar-percentage">50%</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

Over Background
Contribution

Loading
50%
Loading
50%
Show markup
<div style="width: 400px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; flex-direction: column; align-items: center; justify-content: space-around;">

  <div class="spectrum-ProgressBar spectrum-ProgressBar--overBackground" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-ProgressBar-percentage">50%</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" handle="status" style="width: 50%;"></div>
    </div>
  </div>

  <div class="spectrum-ProgressBar spectrum-ProgressBar--small spectrum-ProgressBar--overBackground" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-ProgressBar-percentage">50%</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" handle="status" style="width: 50%;"></div>
    </div>
  </div>

</div>

Indeterminate
Contribution

Loading
Loading
Show markup
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--indeterminate">
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill"></div>
    </div>
    <div class="spectrum-ProgressBar-label" hidden=""></div>
  </div>
</div>

<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--small spectrum-ProgressBar--indeterminate">
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill"></div>
    </div>
    <div class="spectrum-ProgressBar-label" hidden=""></div>
  </div>
</div>

<div style="margin: 20px 0;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--indeterminate">
    <div class="spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill"></div>
    </div>
  </div>
</div>

<div style="margin: 20px 0;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--small spectrum-ProgressBar--indeterminate">
    <div class="spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill"></div>
    </div>
  </div>
</div>

Migration Guide


Component renamed

Bar loader is now known as Progress bar. Replace all .spectrum-BarLoader* classnames with .spectrum-ProgressBar*.