Description: A progress bar is a visual indicator to indicate to the user where they are in the process of completing an action.
508 Guidelines: A progress bar uses a list, which will follow the same guidelines as in the list section.
TIP: To add step numbers to the progress bar, change the content in the css, for example change content: ""; to content: "1";.
<ul class="progress-indicator">
<li><div class="completed"><span class="bubble"></span> Select an Immunization Type</div></li>
<li><div class="completed"><span class="bubble"></span> Enter Immunization Info <span class="sr-only">You are currently on step 2 of 5</span></div></li>
<li><div><span class="bubble"></span> Step 3</div></li>
<li><div><span class="bubble"></span> Step 4</div></li>
<li><div><span class="bubble"></span> Step 5</div></li>
</ul>
Copy