Progress Tracker

index.html

<h1>Progress Tracker</h1>

<ol class="list-unstyled d-flex progress-bar">
  <li class="col progress-bar__step complete">
    <h2>Step 1</h2>
    <p>Summary text explaining step 1.</p>
  </li>
  <li class="col progress-bar__step complete">
    <h2>Step 2</h2>
    <p>Summary text explaining step 2.</p>
  </li>
  <li class="col progress-bar__step in-progress">
    <h2>Step 3</h2>
    <p>Summary text explaining step 3.</p>
  </li>
    <li class="col progress-bar__step">
    <h2>Step 4</h2>
    <p>Summary text explaining step 4.</p>
  </li>
</ol>

progress-tracker.markdown

Progress Tracker

A Pen by Dylan Macnab on CodePen.

License.

style.scss

// ---------------------
// PROGRESS BAR
// ---------------------

.progress-bar__step {
  text-align: center;
  position: relative;
  padding: 30px 20px;
    
  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background: #ddd;
    left: 50%;
    top: -2px;
  }
  &:after {
    display: block;
    content: '';
    position: absolute;
    height: 30px;
    width: 30px;
    background: #ddd;
    top: -15px;
    left: calc(50% - 15px);
    border-radius: 50%;
  }
  // remove line from last step
  &:last-child {
    &:before {
      display: none;
    }
  } 
  
}

// Progress Step States:
.progress-bar__step {
  
  &.complete {
    &:after {
      background: #2640AA;
    }
    &:before {
      background: #bbb;
    }
  }
  
  &.in-progress {
    &:after {
      background: #3D60FF;
    }
  }
  
}


// ---------------------
// LAYOUT
// ---------------------

body {
  padding: 40px 80px;
  color: #333;
}

// Flex
.d-flex {
  display: flex;
}

// flex: flex-grow [,flex-shrink] [,flex-basis]

// The don't overthink it flex column setup:
.col {
  flex-grow: 1; // expand items to fill extra space
  flex-shrink: 1; // evenly shrink when not enough space
  flex-basis: 0; // ideal size, and in this case it'll shrink all the way to 0, which is the magic that makes this work. if you leave it at auto then the content will get in the way of establishing equal width columns.
  
  // shorthand flex
  flex: 1 1 0;
  
  // add a width: __% if you want specific width classes
}



// ---------------------
// TYPE
// ---------------------
h2 {
  font-weight: 400;
  margin: 0;
  line-height: 1;
}

h1 {
  text-align: center;
  padding: 40px 0;
}

p {
  font-weight: 300;
}



// ---------------------
// All the rest...
// ---------------------
* { 
  box-sizing: border-box; 
}

body {
  line-height: 1.3;
}

.list-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}