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 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><path d="M7 10.8L4.5 8.3l.8-.8L7 9.2l3.7-3.7.8.8z"></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-tooltipugbpmz2sxe">
            Overflow Ex.1
      </p>
      <div id="label-tooltipugbpmz2sxe" 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-tooltip5oyzxdpx5qp">
            Overflow Ex. 2 Multi Line
      </p>
      <div id="label-tooltip5oyzxdpx5qp" 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 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><path d="M7.5 4h1v5h-1zm.5 6.2c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8s-.4-.8-.8-.8z"></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
React Angular 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 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><path d="M7 10.8L4.5 8.3l.8-.8L7 9.2l3.7-3.7.8.8z"></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-tooltipugbpmz2sxe">
            Second Step
      </p>
      <div id="label-tooltipugbpmz2sxe" 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-tooltip5oyzxdpx5qp">
            Third Step
      </p>
      <div id="label-tooltip5oyzxdpx5qp" 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 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><path d="M7.5 4h1v5h-1zm.5 6.2c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8s-.4-.8-.8-.8z"></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>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--progress class.

Selector Description
.bx--progress-step--current Applies styles for the current progress-step
.bx--progress-step--incomplete Applies styles for an incomplete progress-step
.bx--progress-step--complete Applies styles for a complete progress-step

Javascript

Getting component class reference

ES2015
import { ProgressIndicator } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var ProgressIndicator = CarbonComponents.ProgressIndicator;

Instantiating

// `#my-progress` is an element with `[data-progress]` attribute
ProgressIndicator.create(document.getElementById('my-progress'));

Public Methods

Name Params Description
getSteps Returns Array of Objects with element and order key/value pairs. The element key contains a step element. The order key is what order the step element is, order starts counting from 1 (the first step element) to whatever the last step element is.
getCurrent Returns an Object with data of the current step (element and order key/value pairs)
setCurrent newCurrentStep: Number Changes the current step with the given index number. (ex. setCurrent(0) sets the first step as the current step)
Example - Changing the current step
// `#my-progress` is an element with `[data-progress]` attribute
var progressIndicatorInstance = ProgressIndicator.create(
  document.getElementById('my-progress')
);
// Sets the 2nd step current
progressIndicatorInstance.setCurrent(1);
  • All index numbers less than the current index will be complete
  • All index numbers greater than the current index will be incomplete

Options

Option Default Selector Description
selectorInit [data-progress] The selector to find the ProgressIndicator element.
selectorStepElement .bx--progress-step The selector to find the step element.
selectorCurrent .bx--progress-step--current The selector to find the step current step element.
selectorIncomplete .bx--progress-step--incomplete The selector to find incomplete step elements.
selectorComplete .bx--progress-step--complete The selector to find complete step elements.
classStep bx--progress-step ClassName for step element
classCompleteStep bx--progress-step--complete ClassName for complete step element
classIncompleteStep bx--progress-step--incomplete ClassName for incomplete step element
classCurrent bx--progress-step--current ClassName for current step element

Classes

Name Description
bx--progress-step The class for a step element
bx--progress-step--complete The class for a complete step element
bx--progress-step--incomplete The class for an incomplete step element
bx--progress-step--current The class for a current step element

FAQ

Adding or removing Progress steps

Once ProgressIndicator instance is initialized, simply add or remove Progress steps in the HTML. The JavaScript will automatically accommodate for any number of steps. A Progress step in HTML looks like this:

<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">Label 1</p>
  <span class="bx--progress-line"></span>
</li>

Note that each progress step will need a modifier class. In the example above, it is bx--progress-step--complete, but the JavaScript will set this to the appropriate modifier class relative to the current step as indicated by bx--progress-step--incomplete.

Edit this page on GitHub
Previous
Components: Pagination
Next
Progress indicator: Usage