CodePen Embed - Steps Flow

ul.steps-box

  //- Step 1
  li.steps
    .steps-point
      .steps-circle 1
      .steps-title 
        | Type Name
      .steps-tooltip
        .tooltip-step
          | Step 1
        .tooltip-title
          | Type Name
        .tooltip-description
          | This is a demo project.

  //- Step 2
  li.steps.is-completed
    .steps-point
      .steps-circle 2
      .steps-title 
        | Address
      .steps-tooltip
        .tooltip-step
          | Step 2
        .tooltip-title
          | Address
        .tooltip-description
          | This is a demo project.

  //- Step 3
  li.steps.is-completed
    .steps-point
      .steps-circle 3
      .steps-title 
        | Payment
      .steps-tooltip
        .tooltip-step
          | Step 3
        .tooltip-title
          | Payment
        .tooltip-description
          | This is a demo project.

  //- Step 4
  li.steps.is-current
    .steps-point
      .steps-circle 4
      .steps-title 
        | Shipping
      .steps-tooltip
        .tooltip-step
          | Step 4
        .tooltip-title
          | Shipping
        .tooltip-description
          | This is a demo project.

  //- Step 5
  li.steps
    .steps-point
      .steps-circle 5
      .steps-title 
        | Finish
      .steps-tooltip
        .tooltip-step
          | Step 5
        .tooltip-title
          |  Finish :)
        .tooltip-description
          | Thank you.<br/>
          a(href="http://www.cjies.com" target="_blank") www.cjies.com

View Compiled

@import "compass/css3";

// *************************************
//
//   Steps Flow
//   author: CJ
//   --> modified 5/30
//
// *************************************

// -------------------------------------
//   Variables
// -------------------------------------

$steps-height: 30px;

$steps-width: 80px;
$steps-width-m: 50px;
$steps-width-s: 20px;

$steps-circle: 30px;
$steps-circle-s: $steps-circle * 0.5;
$steps-circle-l: $steps-circle * 1.25;

$steps-tooltip: 150px;

// Timer
$steps-timer: 200ms;
$steps-timer-l: 400ms;

// Text Color
$steps-color: #C0C0C0;
$steps-color-current: #009FE8;

$c-text-light: #fff;
$font-base: 13px;


// -------------------------------------
//   Mixins
// -------------------------------------

@mixin point-size($_size) {
  width: $_size;
  height: $_size;
  margin-top: -($_size / 2);
  margin-right: -($_size / 2);
}

@mixin circle-size($_size) {
  width: $_size;
  height: $_size;
  line-height: $_size;
  @include border-radius($_size / 2);
}

@mixin steps-color($_left-color, $_left-color-position, $_right-color, $_right-color-position) {
  background: $steps-color;
  @include background(linear-gradient(to right, $_left-color $_left-color-position, $_right-color $_right-color-position));
  background-size: 200% 100%;
  background-position: right top;
}


// -------------------------------------
//   Fontawesome Icon
//   https://codepen.io/geoffyuen/pen/IAJBy
// -------------------------------------

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}


// -------------------------------------
//   Body
// -------------------------------------

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background: #333;
  font-family: Arial, sans-serif;
  font-weight: 300;
  text-decoration: none;
}

a {
  color: $c-text-light;
  &:hover {
    color: $steps-color-current;
  }
}


// -------------------------------------
//   Steps Outer Box
// -------------------------------------

.steps-box {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: 50%;
  text-align: center;
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }
}


// -------------------------------------
//   Steps
// -------------------------------------

.steps {
  position: relative;
  display: inline-block;
  width: $steps-width;
  height: $steps-height;
  font-size: $font-base;
  color: $c-text-light;

  // Steps Line
  &:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 5px;
    margin-top: -2.5px;
    z-index: -1;
    // Style
    @include steps-color($steps-color, 50%, $steps-color, 50%);
  }
  
  // First Child
  &:nth-child(1) {
    width: 0 !important;
    &:before {
      display: none;
    }
  }
  
}


// -------------------------------------
//   Steps Point
// -------------------------------------

.steps-point {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  @include point-size($steps-circle);
  &:hover {
    padding-bottom: 15px; // Extend hover area - Thanks @ryanmcnz
  }
}


// -------------------------------------
//   Steps Cicle
// -------------------------------------

.steps-circle {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  @include transition(transform $steps-timer-l ease-out);
  // Size 
  @include circle-size($steps-circle);
  // Style
  @include steps-color($steps-color, 50%, $steps-color, 50%);
  @include box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.3));
  
  // Completed Icon
  &:before {
    content: "\f00c";
    font-family: 'FontAwesome', sans-serif;
    font-size: $font-base;
    display: none; // Hide first
  }
  
  // Uncomplete Icon
  &:after {
    content: "\f071";
    font-family: 'FontAwesome', sans-serif;
    font-size: $font-base;
    line-height: 1;
    position: absolute;
    right: -2px;
    bottom: -2px;
    color: orange;
    @include text-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
  }
  
  &:hover {
    @include transform(scale(1.1, 1.1));
  }
  
}


// -------------------------------------
//   States Title
// -------------------------------------

.steps-title {
  opacity: 0;
  position: absolute;
  top: -25px;
  left: 50%;
  line-height: 1.2;
  color: darken($c-text-light, 20%);
  @include transition(color $steps-timer-l ease-out);
  // Overflow Ellipsis
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: $steps-width;
  margin-left: - ($steps-width / 2);
}


// -------------------------------------
//   States Tooltip
// -------------------------------------

.steps-tooltip {
  display: none;
  position: absolute;
  top: $steps-circle + 10px;
  left: ($steps-circle / 2) - 15px;
  width: $steps-tooltip + 20px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  text-align: left;
  @include border-radius(3px);
  &:before {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: 10px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
  }
  .tooltip-step {
    font-weight: bold;
    &:after {
      display: inline-block;
      content: "(uncompleted)";
      margin-left: 5px;
      color: orange;
    }
  }
  .tooltip-title {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
}  // END steps-tooltip


// -------------------------------------
//   Statements
// -------------------------------------

.steps {
  
  //*** Mini State ***//
  &.is-mini {
    width: $steps-width-s;
    .steps-point {
      @include point-size($steps-circle-s);
    }
    .steps-circle {
      font-size: 0;
      @include circle-size($steps-circle-s);
      &:before, &:after {font-size: $font-base - 5px;}
    }
    .steps-title {
      display: none;
    }
    .steps-tooltip {
      top: $steps-circle-s + 10px;
      left: ($steps-circle-s / 2) - 15px;
    }
    // If next not mini
    & + :not(.is-mini) {
      width: $steps-width-m;
    }
  }
  
  //*** Completed State ***//
  &.is-completed {
    // Show completed-icon
    .steps-circle {
      font-size: 0;
      &:before {display: inline-block;}
      &:after {display: none;}
    }
    // Change color of next line
    .steps-circle,
    & + .is-completed:before, 
    & + .is-current:before {
      @include steps-color($steps-color-current, 50%, $steps-color, 50%);
    }
    .steps-tooltip .tooltip-step:after {
      display: none;
    }
  }
  
  //*** Current State ***//
  &.is-current {
    .steps-point {
      @include point-size($steps-circle-l);
    }
    .steps-circle {
      @include circle-size($steps-circle-l);
      // Text Style
      font-size: $font-base + 5px;
      font-weight: bold;
      @include text-shadow(0 1px 0 rgba(0, 0, 0, 0.8));
      @include box-shadow(0 2px 4px 0px rgba(0, 0, 0, 0.3));
      &:after {display: none;}
    }
    .steps-title {
      color: $c-text-light;
      font-weight: bold;
    }
    .steps-tooltip {
      top: $steps-circle-l + 10px;
      left: ($steps-circle-l / 2) - 15px;
    }
    .steps-circle {
      @include steps-color($steps-color-current, 50%, $steps-color, 50%);
    }
    // Change color of next line
    & + .steps:before {
      @include steps-color($steps-color-current, 0, $steps-color, 40%);
    }
    .steps-tooltip .tooltip-step:after {
      display: none;
    }
    // Hide uncomplete icon after current
    & ~ .steps {
      .steps-circle:after {
        display: none;
      }
      .steps-tooltip .tooltip-step:after {
        display: none;
      }
    }
  }
  
} // END steps-point


// -------------------------------------
//   Hover
// -------------------------------------

.steps-point:hover {
  .steps-title {
    color: $c-text-light;
  }
  .steps-tooltip {
    display: block;
    @include animation(stepsTooltipIn $steps-timer-l linear forwards);
  }
}


// -------------------------------------
//   Animation
// -------------------------------------

.steps {
  
  //*** Circle & Line Enter ***//
  &.is-circle-entering {
    &:before {
      opacity: 0;
      @include animation(stepsBounceIn $steps-timer-l linear forwards);
      @include transform-origin(0, 0);
    }
    .steps-circle {
      opacity: 0;
      @include animation(stepsBounceIn $steps-timer-l linear forwards);
    }
  }
  
  //*** Line Flow ***//
  &.is-line-entering {
    &:before {
      opacity: 1;
      @include animation(stepsLineIn $steps-timer linear forwards);
    }
    .steps-circle {
      opacity: 1;
      @include animation(stepsLineIn $steps-timer $steps-timer linear forwards);
    }
  }
  
  //*** Title Enter ***//
  &.is-title-entering {
    .steps-title {
      opacity: 0;
      @include animation(stepsTitleIn $steps-timer-l linear forwards);
    }
  }
  
  
} // END steps


// -------------------------------------
//   Animation Keyframes
//   Bounce: https://daneden.github.io/animate.css/
// -------------------------------------

// ----- Tooltip In ----- //

@keyframes stepsTooltipIn {
  from {
    @include transform(translate(0, -10px));
    @include opacity(0);
  }
  to {
    @include transform(translate(0, 0));
    @include opacity(1);
  }
}
@-webkit-keyframes stepsTooltipIn {
  from {
    -webkit-transform: translate(0, -10px);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}


// ----- Bounce In ----- //

@keyframes stepsBounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    transition-time-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    @include transform(scale(.3, .3));
    @include opacity(1);
  }

  20% {
    @include transform(scale(1.1, 1.1));
    @include opacity(1);
  }

  40% {
    @include transform(scale(.9, .9));
    @include opacity(1);
  }

  60% {
    @include transform(scale(1.03, 1.03));
    @include opacity(1);
  }

  80% {
    @include transform(scale(.97, .97));
    @include opacity(1);
  }

  100% {
    @include transform(scale(1, 1));
    @include opacity(1);
  }
}
@-webkit-keyframes stepsBounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-time-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    -webkit-transform: scale(.3, .3);
    opacity: 1;
  }

  20% {
    -webkit-transform: scale(1.1, 1.1);
    opacity: 1;
  }

  40% {
    -webkit-transform: scale(.9, .9);
    opacity: 1;
  }

  60% {
    -webkit-transform: scale(1.03, 1.03);
    opacity: 1;
  }

  80% {
    -webkit-transform: scale(.97, .97);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
}


// ----- Line In ----- //

@keyframes stepsLineIn {
  from {
    background-position: right top;
    opacity: 1;
  }
  to {
    background-position: left top;
    opacity: 1;
  }
}
@-webkit-keyframes stepsLineIn {
  from {
    background-position: right top;
    opacity: 1;
  }
  to {
    background-position: left top;
    opacity: 1;
  }
}

// ----- Title In ----- //

@keyframes stepsTitleIn {
  from {
    @include transform(translate(0, 10px));
    @include opacity(0);
  }
  to {
    @include transform(translate(0, 0));
    @include opacity(1);
  }
}
@-webkit-keyframes stepsTitleIn {
  from {
    -webkit-transform: translate(0, 10px);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}

View Compiled

$(document).ready(function($) {

  var steps = $('.steps');
  
  // Timer for delay, must same as CSS!
  var stepsTimer = 200,
      stepsTimerL = 400;
  
  // remove mini between current
  steps.addClass('is-mini');
  steps.each(function(i) {
    var self = $(this);
    if (self.hasClass('is-current')) {
      self.removeClass('is-mini');
      self.prev().removeClass('is-mini');
      self.next().removeClass('is-mini');
    }
  });

  // Bounce Animation
  steps.addClass('is-circle-entering');
  
  // Delay for BounceIn
  setTimeout(function() {
    steps.each(function(i) {
      var self = $(this),
          timer = (stepsTimer * 2) * i;
      setTimeout(function() {
        // Line Flow
        self.addClass('is-line-entering');
        if(self.hasClass('is-current')) {
          // Title FadeIn
          steps.addClass('is-title-entering');
        }
      }, timer);
    });
  }, stepsTimer);

});

This Pen is owned by CJies Tan on CodePen.

See more by @cjies on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js