name: Progress bar
SpectrumSiteSlug: https://spectrum.adobe.com/page/progress-bar/
status: Verified
id: progressbar-m
sections:
  - name: Migration Guide
    description: |
      ### 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](fieldlabel.html) for its label and percentage. Add the appropriately sized Field label to match the t-shirt size of the Progress bar.
examples:
  - id: progressbar-m
    name: Sizing
    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>
  - id: progressbar-m
    name: Top label (default)
    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>
  - id: progressbar-m
    name: Side label
    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>
  - id: progressbar-m-over-background
    name: Over Background
    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--sizeM spectrum-ProgressBar--overBackground" 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>
  - id: progressbar-indeterminate-m
    name: Indeterminate
    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>
  - id: progressbar-indeterminate-m
    name: Indeterminate (with label)
    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>
  - id: progressbar-m
    name: Custom width
    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>
  - id: progressbar-m
    name: Custom width (side label)
    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>