Skip to main contentCarbon Design System

Progress indicator

Progress indicator

  • First step

    Optional

  • Overflow Ex.1

  • Overflow Ex. 2 Multi Line

  • Fourth step

  • Fifth step

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<ul data-progress data-progress-current class="bx--progress ">
    <li class="bx--progress-step bx--progress-step--complete "  >
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"></path><path d="M7 10.8L4.5 8.3 5.3 7.5 7 9.2 10.7 5.5 11.5 6.3z"></path></svg>
      <p tabindex="0" class="bx--progress-label">
          First step
      </p>
      <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text"></p>
      </div>
        <p class="bx--progress-optional">Optional</p>
      <span class="bx--progress-line"></span>
    </li>
    <li class="bx--progress-step bx--progress-step--current "  >
        <svg>
          <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" ></path>
        </svg>
      <p tabindex="0" class="bx--progress-label" aria-describedby="label-tooltipcodd7g1obv5">
            Overflow Ex.1
      </p>
      <div id="label-tooltipcodd7g1obv5" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text">Overflow Ex.1</p>
      </div>
      <span class="bx--progress-line"></span>
    </li>
    <li class="bx--progress-step bx--progress-step--incomplete "  >
          <svg>
            <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
          </svg>
      <p tabindex="0" class="bx--progress-label" aria-describedby="label-tooltipfp695pl40bh">
            Overflow Ex. 2 Multi Line
      </p>
      <div id="label-tooltipfp695pl40bh" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text">Overflow Ex. 2 Multi Line</p>
      </div>
      <span class="bx--progress-line"></span>
    </li>
    <li class="bx--progress-step bx--progress-step--incomplete "  data-invalid  >
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--progress__warning" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"></path><path d="M7.5 4H8.5V9H7.5zM8 10.2c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8S8.4 10.2 8 10.2z"></path></svg>
      <p tabindex="0" class="bx--progress-label">
          Fourth step
      </p>
      <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text"></p>
      </div>
      <span class="bx--progress-line"></span>
    </li>
    <li class="bx--progress-step bx--progress-step--incomplete  bx--progress-step--disabled "   aria-disabled="true" >
          <svg>
            <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
          </svg>
      <p tabindex="0" class="bx--progress-label">
          Fifth step
      </p>
      <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text"></p>
      </div>
      <span class="bx--progress-line"></span>
    </li>
</ul>

Progress indicator vertical

  • First step

    Optional

  • Second Step

  • Third Step

  • Fourth step

  • Fifth step

Vanilla JS
Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<ul data-progress data-progress-current class="bx--progress bx--progress--vertical">
    <li class="bx--progress-step bx--progress-step--complete "  >
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"></path><path d="M7 10.8L4.5 8.3 5.3 7.5 7 9.2 10.7 5.5 11.5 6.3z"></path></svg>
      <p tabindex="0" class="bx--progress-label">
          First step
      </p>
      <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text"></p>
      </div>
        <p class="bx--progress-optional">Optional</p>
      <span class="bx--progress-line"></span>
    </li>
    <li class="bx--progress-step bx--progress-step--current "  >
        <svg>
          <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" ></path>
        </svg>
      <p tabindex="0" class="bx--progress-label" aria-describedby="label-tooltipcodd7g1obv5">
            Second Step
      </p>
      <div id="label-tooltipcodd7g1obv5" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text">Overflow Ex.1</p>
      </div>
      <span class="bx--progress-line"></span>
    </li>
    <li class="bx--progress-step bx--progress-step--incomplete "  >
          <svg>
            <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
          </svg>
      <p tabindex="0" class="bx--progress-label" aria-describedby="label-tooltipfp695pl40bh">
            Third Step
      </p>
      <div id="label-tooltipfp695pl40bh" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text">Overflow Ex. 2 Multi Line</p>
      </div>
      <span class="bx--progress-line"></span>
    </li>
    <li class="bx--progress-step bx--progress-step--incomplete "  data-invalid  >
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--progress__warning" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"></path><path d="M7.5 4H8.5V9H7.5zM8 10.2c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8S8.4 10.2 8 10.2z"></path></svg>
      <p tabindex="0" class="bx--progress-label">
          Fourth step
      </p>
      <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text"></p>
      </div>
      <span class="bx--progress-line"></span>
    </li>
    <li class="bx--progress-step bx--progress-step--incomplete  bx--progress-step--disabled "   aria-disabled="true" >
          <svg>
            <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
          </svg>
      <p tabindex="0" class="bx--progress-label">
          Fifth step
      </p>
      <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
        <span class="bx--tooltip__caret"></span>
        <p class="bx--tooltip__text"></p>
      </div>
      <span class="bx--progress-line"></span>
    </li>
</ul>
Edit this page on GitHub
Previous
Components: Pagination
Next
Progress indicator: Usage