Progress indicators

Progress indicator

  1. Lorem
  2. Ipsum
  3. Dolor
  1. Lorem
  2. Ipsum
  3. Dolor
  1. Lorem
  2. Ipsum
  3. Dolor
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Maecenas neque ipsum
  4. Accumsan a magna in
<!-- START progress-indicator component -->
<ol class="progress-indicator">
  <li aria-label="completed">Lorem</li>
  <li aria-label="current">Ipsum</li>
  <li>Dolor</li>
</ol>
<!-- END progress-indicator component -->

Progress circle

Choices 4/6 Profile 32% References
Choices 4/6 Profile 32% Personal statement In progress References
Choices 4/6 Profile 32% Personal statement In progress References
<!-- START progress-circle component -->
<svg aria-labelledby="id8750db35fd" viewBox="0 0 100 100" class="progress-circle progress-circle--xlarge" style="--progress:32;">
  <title id="id8750db35fd">Profile</title>
  <circle r="30" cx="50%" cy="50%"></circle>
  <circle r="30" cx="50%" cy="50%"></circle>
  <text x="50%" y="50%">32<tspan class="progress-unit">%</tspan></text>
</svg>
<!-- END progress-circle component -->

Progress button container (SVG outside of button)

Percentage complete 50%
<!-- START progress-button-container component -->
<div class="progress-button-container">
  <!-- START progress circle component -->
  <svg aria-labelledby="id5422cf69d9" viewBox="0 0 100 100" class="progress-circle progress-circle--xlarge" style="--progress:50;">
    <title id="id5422cf69d9">Percentage complete</title>
    <circle r="30" cx="50%" cy="50%"></circle>
    <circle r="30" cx="50%" cy="50%"></circle>
    <text x="50%" y="50%">50<tspan class="progress-unit">%</tspan></text>
  </svg>
  <!-- END progress circle component -->
  <button class="submit-application progress-button">Submit</button>
</div>
<!-- END progress-button-container component -->

Progress button (SVG within button)

<!-- START progress-button component -->
<button class="submit-application progress-button">
  <!-- START progress circle component -->
  <svg aria-labelledby="id86e8b5f55f" viewBox="0 0 100 100" class="progress-circle progress-circle--xlarge" style="--progress:50;">
    <title id="id86e8b5f55f">Percentage complete</title>
    <circle r="30" cx="50%" cy="50%"></circle>
    <circle r="30" cx="50%" cy="50%"></circle>
    <text x="50%" y="50%">50<tspan class="progress-unit">%</tspan></text>
  </svg>
  <!-- END progress circle component -->
  <span>Submit</span>
</button>
<!-- END progress-button component -->