carbon-components/html/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="16" height="16" viewBox="0 0 16 16">
          <g fill-rule="nonzero">
            <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
            <path d="M11.646 5.146l.708.708-5.604 5.603-3.104-3.103.708-.708 2.396 2.397z"/>
          </g>
        </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>