Bar Loader

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/barloader@2.0.0

Variants#


Standard#
Contribution

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

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

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

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

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

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

Over Background#
Contribution

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

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

</div>
Show markup

Indeterminate#
Contribution

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

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

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

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