Progress Markers

Progress markers indicate the current progress against a projected goal.

Developers should use <ol> for progress markers because this information follows an order. Use the class .progress-marker.

  1. Progress Item 1
  2. Progress Item 2
  3. Progress Item 3
  4. Progress Item 4
  5. Progress Item 5
<ol class="progress-marker">
    <li>Progress Item 1</li>
    <li>Progress Item 2</li>
    <li>Progress Item 3</li>
    <li>Progress Item 4</li>
    <li>Progress Item 5</li>
</ol>

To mark items as “finished”, add the class .enabled on the list items.

  1. Progress Item 1
  2. Progress Item 2
  3. Progress Item 3
  4. Progress Item 4
  5. Progress Item 5
<ol class="progress-marker">
    <li class="enabled">Progress Item 1</li>
    <li class="enabled">Progress Item 2</li>
    <li class="enabled">Progress Item 3</li>
    <li>Progress Item 4</li>
    <li>Progress Item 5</li>
</ol>