Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

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

Standard progress circle

Choices You have made 4 out of 6 possible choices Profile Your profile section is 32% complete References Your references section is complete

NOTE: Set the r value of the circles to 46 for the standard variant.

<!-- START progress-circle-container component -->
<span class="progress-circle-container">
  <!-- START progress-circle component -->
  <span class="progress-circle">
    <svg aria-hidden="true" viewBox="0 0 100 100" style="--progress:32;">
      <circle r="46" cx="50%" cy="50%"></circle>
      <circle r="46" cx="50%" cy="50%"></circle>
    </svg>
    <!-- END progress-circle component -->
    <span aria-hidden="true" class="progress-circle-number">32
      <span class="progress-circle-unit">%</span>
    </span>
  </span>
  <span class="progress-circle-title">Profile</span>
  <span class="hide-element">Helpful description for screenreaders</span>
</span>
<!-- END progress-circle-container component -->

Large progress circle

Choices Helpful description for screenreaders Profile Helpful description for screenreaders Personal statement Helpful description for screenreaders References Helpful description for screenreaders Personal statement Helpful description for screenreaders

NOTE: Set the r value of the circles to 44 for the large variant.

<!-- START progress-circle-container component -->
<span class="progress-circle-container progress-circle-container--large">
  <!-- START progress-circle component -->
  <span class="progress-circle">
    <svg aria-hidden="true" viewBox="0 0 100 100" style="--progress:32;">
      <circle r="44" cx="50%" cy="50%"></circle>
      <circle r="44" cx="50%" cy="50%"></circle>
    </svg>
    <!-- END progress-circle component -->
    <span aria-hidden="true" class="progress-circle-number">32
      <span class="progress-circle-unit">%</span>
    </span>
  </span>
  <span class="progress-circle-title">Profile</span>
  <span class="hide-element">Helpful description for screenreaders</span>
</span>
<!-- END progress-circle-container component -->

Extra large progress circle

Choices Helpful description for screenreaders Profile Helpful description for screenreaders Personal statement Helpful description for screenreaders References Helpful description for screenreaders

NOTE: Set the r value of the circles to 44 for the xlarge variant.

<!-- START progress-circle-container component -->
<span class="progress-circle-container progress-circle-container--xlarge">
  <!-- START progress-circle component -->
  <span class="progress-circle">
    <svg aria-hidden="true" viewBox="0 0 100 100" style="--progress:32;">
      <circle r="44" cx="50%" cy="50%"></circle>
      <circle r="44" cx="50%" cy="50%"></circle>
    </svg>
    <!-- END progress-circle component -->
    <span aria-hidden="true" class="progress-circle-number">32
      <span class="progress-circle-unit">%</span>
    </span>
  </span>
  <span class="progress-circle-title">Profile</span>
  <span class="hide-element">Helpful description for screenreaders</span>
</span>
<!-- END progress-circle-container component -->

Extra large progress circle with hidden title

Choices Helpful description for screenreaders Profile Helpful description for screenreaders Personal statement Helpful description for screenreaders References Helpful description for screenreaders

NOTE: Set the r value of the circles to 44 for the xlarge variant.

<!-- START progress-circle-container component -->
<span class="progress-circle-container progress-circle-container--xlarge">
  <!-- START progress-circle component -->
  <span class="progress-circle">
    <svg aria-hidden="true" viewBox="0 0 100 100" style="--progress:32;">
      <circle r="44" cx="50%" cy="50%"></circle>
      <circle r="44" cx="50%" cy="50%"></circle>
    </svg>
    <!-- END progress-circle component -->
    <span aria-hidden="true" class="progress-circle-number">32
      <span class="progress-circle-unit">%</span>
    </span>
  </span>
  <span class="hide-element">Profile</span>
  <span class="hide-element">Helpful description for screenreaders</span>
</span>
<!-- END progress-circle-container component -->

Extra large progress circle with buttons

NOTE: Set the r value of the circles to 44 for the xlarge variant.

<!-- START progress-circle-container component -->
<button class="progress-circle-container progress-circle-container--xlarge">
  <!-- START progress-circle component -->
  <span class="progress-circle progress-circle--needs-action">
    <svg aria-hidden="true" viewBox="0 0 100 100" style="--progress:100;">
      <circle r="44" cx="50%" cy="50%"></circle>
      <circle r="44" cx="50%" cy="50%"></circle>
    </svg>
    <!-- END progress-circle component -->
    <span aria-hidden="true" class="progress-circle-text">All decisions received</span>
  </span>
  <span class="progress-circle-button button button--primary icon-inline--right icon--chevron-right-light" aria-hidden="true">Reply to offers</span>
  <span class="hide-element">Helpful description for screenreaders</span>
</button>
<!-- END progress-circle-container component -->

[deprecated] 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 deprecated progress-circle component -->
<svg aria-labelledby="id5e24cf3d79" viewBox="0 0 100 100" class="progress-circle progress-circle--xlarge" style="--progress:32;">
  <title id="id5e24cf3d79">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 deprecated progress-circle component -->

[deprecated] Progress button container (SVG outside of button)

Percentage complete 50% 
<!-- START deprecated progress-button-container component -->
<div class="progress-button-container">
  <!-- START deprecated progress circle component -->
  <svg aria-labelledby="id44bffdfa27" viewBox="0 0 100 100" class="progress-circle progress-circle--xlarge" style="--progress:50;">
    <title id="id44bffdfa27">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 deprecated progress circle component -->
  <button class="submit-application progress-button">Submit</button>
</div>
<!-- END deprecated progress-button-container component -->

[deprecated] Progress button (SVG within button)

<!-- START deprecated progress-button component -->
<button class="submit-application progress-button">
  <!-- START deprecated progress circle component -->
  <svg aria-labelledby="idc54df56659" viewBox="0 0 100 100" class="progress-circle progress-circle--xlarge" style="--progress:50;">
    <title id="idc54df56659">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 deprecated progress circle component -->
  <span>Submit</span>
</button>
<!-- END deprecated progress-button component -->