Props

name type default description
className string Class name for the root element.
progress number 0 Current progress for the bar.
size number Total number of steps.
stepClassName string flex-1 Class name for individual step elements. Default option expands step elements so the root element will fill its container.

Usage

The width for step elements is configured using the stepClassName prop. For example, to render a progress bar with 36px steps, pass stepClassName="width-6".

Javascript:

<ProgressBar progress={1} size={3} />

Rendered markup:

<ul class="ProgressBar">
  <li class="ProgressBar__step ProgressBar__step--active flex-1"></li>
  <li class="ProgressBar__step flex-1"></li>
  <li class="ProgressBar__step flex-1"></li>
</ul>
<div>
    <div class="text-2 mb1">Fixed step width</div>
    <div class="d-flex align-items-center">
        <div class="flex-1">
            <ul class="ProgressBar">
                <li class="ProgressBar__step width-6"></li>
                <li class="ProgressBar__step width-6"></li>
                <li class="ProgressBar__step width-6"></li>
                <li class="ProgressBar__step width-6"></li>
                <li class="ProgressBar__step width-6"></li>
            </ul>
        </div>
        <div class="ml5">
            <div class="Button--small Button">
                <button class="Button__control" type="button">Next</button>
            </div>
        </div>
    </div>
</div>
import * as React from 'react';
import Button from '../button/button.jsx';
import ProgressBar from './progress_bar.jsx';

class ProgressBarExample extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      progress: 0,
    };
  }

  incrementIndex() {
    const nextIndex = this.state.progress + 1;
    this.goToIndex(nextIndex <= this.props.size ? nextIndex : 0);
  }

  goToIndex(index) {
    this.setState({ progress: index });
  }

  render() {
    const { label, ...props } = this.props;

    return (
      <div>
        <div className="text-2 mb1">{label}</div>
        <div className="d-flex align-items-center">
          <div className="flex-1">
            <ProgressBar {...props} progress={this.state.progress} />
          </div>
          <div className="ml5">
            <Button
              className="Button--small"
              onClick={() => {
                this.incrementIndex();
              }}
            >
              Next
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default ProgressBarExample;
{
  "size": 5,
  "label": "Fixed step width",
  "stepClassName": "width-6"
}
  • Content:
    .ProgressBar {
      display: flex;
      // Cancel default styles for <ul> element
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .ProgressBar__step,
    .ProgressBar__step::after {
      border-radius: $border-radius;
      display: inline-block;
    }
    
    .ProgressBar__step {
      background-color: rgba($black, $alpha-300);
      height: 2px;
      margin-right: 3px;
      position: relative;
    
      &:last-child {
        margin-right: 0;
      }
    
      &::after {
        background-color: $purple-200;
        box-shadow: 0 0 modular-scale-px(-6) 0 $purple-100;
        content: ' ';
        height: 100%;
        opacity: 0;
        transition: opacity .2s linear;
        width: 100%;
      }
    }
    
    .ProgressBar__step--active::after {
      opacity: 1;
    }
    
  • URL: /components/raw/progress-bar/_progress_bar.scss
  • Filesystem Path: library/components/progress_bar/_progress_bar.scss
  • Size: 677 Bytes