carbon-components/src/components/progress-indicator/progress-indicator.html

Carbon Components is a component library for IBM Cloud

<ul data-progress data-progress-current class="bx--progress">
  <li class="bx--progress-step bx--progress-step--complete">
    <svg width="24px" height="24px" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="12"></circle>
      <polygon points="10.3 13.6 7.7 11 6.3 12.4 10.3 16.4 17.8 9 16.4 7.6"></polygon>
    </svg>
    <p class="bx--progress-label">First step</p>
    <span class="bx--progress-line"></span>
  </li>
  <li class="bx--progress-step bx--progress-step--current">
    <svg>
      <circle cx="12" cy="12" r="12"></circle>
      <circle cx="12" cy="12" r="6"></circle>
    </svg>
    <p class="bx--progress-label">Second step</p>
    <span class="bx--progress-line"></span>
  </li>
  <li class="bx--progress-step bx--progress-step--incomplete">
    <svg>
      <circle cx="12" cy="12" r="12"></circle>
    </svg>
    <p class="bx--progress-label">Third step</p>
    <span class="bx--progress-line"></span>
  </li>
  <li class="bx--progress-step bx--progress-step--incomplete">
    <svg>
      <circle cx="12" cy="12" r="12"></circle>
    </svg>
    <p class="bx--progress-label">Fourth step</p>
    <span class="bx--progress-line"></span>
  </li>
</ul>