Circle Loader

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/circleloader@2.0.0

Variants#


Standard#
Verified

<div style="width: 250px; height: 150px; display: flex; align-items: center; justify-content: space-around;" id="standard-loaders">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--small">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="spectrum-CircleLoader">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="spectrum-CircleLoader spectrum-CircleLoader--large">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
Show markup

Over Background#
Verified

<div style="width: 250px; height: 150px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: space-around;" id="ob-loaders">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--small spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="spectrum-CircleLoader spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="spectrum-CircleLoader spectrum-CircleLoader--large spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
Show markup

Indeterminate#
Verified

<div style="width: 250px; height: 150px; display: flex; align-items: center; justify-content: space-around;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate spectrum-CircleLoader--small">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate spectrum-CircleLoader--large">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
Show markup