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

Progress circle

Component status
Contribution
Current version@spectrum-css/progresscircle@2.2.3
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Small

Medium

Large

Show markup

<div class="spectrum-Examples" id="standard-loaders">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading" style="margin-bottom: 2rem">Small</h4>
    <div class="spectrum-ProgressCircle spectrum-ProgressCircle--small">
      <div class="spectrum-ProgressCircle-track"></div>
      <div class="spectrum-ProgressCircle-fills">
        <div class="spectrum-ProgressCircle-fillMask1">
          <div class="spectrum-ProgressCircle-fillSubMask1">
            <div class="spectrum-ProgressCircle-fill"></div>
          </div>
        </div>
        <div class="spectrum-ProgressCircle-fillMask2">
          <div class="spectrum-ProgressCircle-fillSubMask2">
            <div class="spectrum-ProgressCircle-fill"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading" style="margin-bottom: 2rem">Medium</h4>
    <div class="spectrum-ProgressCircle">
      <div class="spectrum-ProgressCircle-track"></div>
      <div class="spectrum-ProgressCircle-fills">
        <div class="spectrum-ProgressCircle-fillMask1">
          <div class="spectrum-ProgressCircle-fillSubMask1">
            <div class="spectrum-ProgressCircle-fill"></div>
          </div>
        </div>
        <div class="spectrum-ProgressCircle-fillMask2">
          <div class="spectrum-ProgressCircle-fillSubMask2">
            <div class="spectrum-ProgressCircle-fill"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading" style="margin-bottom: 2rem">Large</h4>
    <div class="spectrum-ProgressCircle spectrum-ProgressCircle--large">
      <div class="spectrum-ProgressCircle-track"></div>
      <div class="spectrum-ProgressCircle-fills">
        <div class="spectrum-ProgressCircle-fillMask1">
          <div class="spectrum-ProgressCircle-fillSubMask1">
            <div class="spectrum-ProgressCircle-fill"></div>
          </div>
        </div>
        <div class="spectrum-ProgressCircle-fillMask2">
          <div class="spectrum-ProgressCircle-fillSubMask2">
            <div class="spectrum-ProgressCircle-fill"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Indeterminate
Contribution

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

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

Static White
Contribution

Standard

Indeterminate

Show markup
<div class="spectrum-Examples" id="standard-loaders">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading" style="margin-bottom: 2rem">Standard</h4>
    <div style="width: 250px; height: 150px; background-color: #0F797D; display: flex; align-items: center; justify-content: space-around;" id="ob-loaders">
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>

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

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

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading" style="margin-bottom: 2rem">Indeterminate</h4>
    <div style="width: 250px; height: 150px; background-color: #0F797D; display: flex; align-items: center; justify-content: space-around;" id="ob-loaders">
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
      <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--staticWhite">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--large spectrum-ProgressCircle--staticWhite">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

Component renamed

Circle loader is now known as Progress circle. Replace all .spectrum-CircleLoader* classnames with .spectrum-ProgressCircle*.