Progress indicator
- Lorem
- Ipsum
- Dolor
- Lorem
- Ipsum
- Dolor
- Lorem
- Ipsum
- Dolor
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Maecenas neque ipsum
- 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
<!-- 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)
<!-- 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 -->