• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Progress bar

Component status
Contribution
Current version@spectrum-css/progressbar@4.1.7
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/progressbar@5.0.0-s2-foundations.15
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Sizing
Contribution

S

Loading
50%

M (default)

Loading
50%

L

Loading
50%

XL

Loading
50%
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeS" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeS spectrum-ProgressBar-label">Loading</div>
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeS spectrum-ProgressBar-percentage">50%</div>
      <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 class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-label">Loading</div>
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-percentage">50%</div>
      <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 class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeL" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Loading</div>
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">50%</div>
      <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 class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeXL" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL spectrum-ProgressBar-label">Loading</div>
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL spectrum-ProgressBar-percentage">50%</div>
      <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>

Top label (default)
Contribution

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

Side label
Contribution

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

Static White
Contribution

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

  <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM spectrum-ProgressBar--staticWhite" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-label">Loading</div>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM 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

Show markup
<div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM spectrum-ProgressBar--indeterminate">
  <div class="spectrum-ProgressBar-track">
    <div class="spectrum-ProgressBar-fill"></div>
  </div>
  <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-label" hidden=""></div>
</div>

Indeterminate (with label)
Contribution

Loading
Show markup
<div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM spectrum-ProgressBar--indeterminate">
  <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-label">Loading</div>
  <div class="spectrum-ProgressBar-track">
    <div class="spectrum-ProgressBar-fill"></div>
  </div>
</div>

Custom width
Contribution

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

Custom width (side label)
Contribution

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

Migration Guide

Component renamed

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

T-shirt sizing

Progress bar now supports t-shirt sizing and requires that you specify the size of button by adding a .spectrum-ProgressBar--size* class.

Size classnames changed

Previous size classnames map as follows:

Previous size classname New size classname
.spectrum-ProgressBar--small .spectrum-ProgressBar--sizeS
.spectrum-ProgressBar--large .spectrum-ProgressBar--sizeM

Label and percentage now use Field Label

Progress bar now uses Field label for its label and percentage. Add the appropriately sized Field label to match the t-shirt size of the Progress bar.