Progress Steps / Wizard - Ogbugbu Web Development Service

VISUAL DEMO

See the Pen Progress Steps / Wizard by ogbugbu (@ogbugbu) on CodePen.

<< HTML CODE>>

<div id="container">
  <div class="step-wizard">
    <div class="progress">
      <div class="progressbar empty"></div>
      <div id="prog" class="progressbar"></div>
    </div>
    <ul>
      <li class="active">
        <a href="#" id="step1">
          <span class="step">1</span>
          <span class="title">Shipping Information</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step2">
          <span class="step">2</span>
          <span class="title">Billing Information</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step3">
          <span class="step">3</span>
          <span class="title">Payment Details</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step4">
          <span class="step">4</span>
          <span class="title">Review & Place Order</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="buttons">
    <button class="btn" id="prev">prev</button>
    <button class="btn" id="next">next</button>
  </div>
</div>

</div>

<ul>

<span class="title">Shipping Information</span>

</a>

</li>

<span class="title">Billing Information</span>

</a>

</li>

<span class="title">Payment Details</span>

</a>

</li>

<span class="title">Review & Place Order</span>

</a>

</li>

</ul>

</div>

</div>

<< CSS CODE>>

* {
  font-family: 'Arial', sans-serif;
}
#container {
  position: relative;
  text-align: center;
  max-width: 80%;
  box-sizing: border-box;
  margin: 0 auto;
}
.buttons {
  position: absolute;
  top: 180px;
  text-align: center;
  width: 100%;
}
.btn {
  width: 50px;
  height: 30px;
}
.step-wizard {
  display: inline-block;
  position: relative;
  width: 85%;
  .progress {
    position: absolute; 
    top: 47px;
    left: 12.5%;
    width: 75%;
  }
  .progressbar {
    position: absolute;
    background-color: #3B5343;
    opacity: 1;
    height: 3px;
    //border: 1px solid e5e6e6;
    width: 0%;
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
    &.empty {
      opacity: 1;
      width: 100%;
      background-color: #d0d0d0;
    }
  }
  ul {
    position: absolute;
    width: 100%;
    list-style-type: none;
    padding: 0;
    left: -2%
  }
  li {
    display: inline-block;
    text-align: center;
    width: 24%;
    & .step {
      text-align: center;
      position: absolute;
      display: inline-block;
      font-size: 18px;
      font-weight: bold;
      line-height: 30px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 3px solid;
      border-color: #d0d0d0;
      background: #ffffff;
      -webkit-transition: background-color 0.6s ease, border-color 0.6s ease;
      -o-transition: background-color 0.6s ease, border-color 0.6s ease;
      transition: background-color 0.6s ease, border-color 0.6s ease; 
    }
    & .title {
      text-decoration: underline;
      position: absolute;
      width: 100%;
      left: 20px;
      padding-top: 42px;
      color: #777;
      -webkit-transition: color 0.6s ease;
      -o-transition: color 0.6s ease;
      transition: color 0.6s ease; 
    }
    &.active {
      .step {
        border-color: #3B5343;
        color: #3b5343;
      }
      .title {
        text-decoration: none;
        color: #3b5343;
        font-weight: bold;
      }
    }
    &.done .title {
      color: #3b5343;
      &:hover {
        color: #3B5343;
      }
    }
    &.done .step {
      color: white;
      background-color: #3B5343;
      border-color: #3B5343;
    }  
    & > a {
      display: block;
      width: 100%;
      color: #777;
      position: relative;
      text-align: center; 
      &:hover {
        & .step {
          border-color: #3b5343;
          background: #eee;
          color: #3b5343;
        }
        & .title {
          color: #3b5343;
        }
      }
    }
  } 
}

@media only screen and (max-width: 1200px) {
  .step-wizard li {
    width: 24%;
  }
}

@media only screen and (max-width: 375px) {
  .step-wizard li {
    width: 22%;
  }
}

li.done a span.step {
    font-size: 0;
}
li.done a span.step::before {
  content:  "\2713 ";
  font-size: 18px;
  
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

* {

font-family: 'Arial', sans-serif;

}

#container {

position: relative;

text-align: center;

max-width: 80%;

box-sizing: border-box;

margin: 0 auto;

}

.buttons {

position: absolute;

top: 180px;

text-align: center;

width: 100%;

}

.btn {

width: 50px;

height: 30px;

}

.step-wizard {

display: inline-block;

position: relative;

width: 85%;

.progress {

position: absolute;

top: 47px;

left: 12.5%;

width: 75%;

}

.progressbar {

position: absolute;

background-color: #3B5343;

opacity: 1;

height: 3px;

//border: 1px solid e5e6e6;

width: 0%;

-webkit-transition: width 0.6s ease;

-o-transition: width 0.6s ease;

transition: width 0.6s ease;

&.empty {

opacity: 1;

width: 100%;

background-color: #d0d0d0;

}

ul {

position: absolute;

width: 100%;

list-style-type: none;

padding: 0;

left: -2%

}

li {

display: inline-block;

text-align: center;

width: 24%;

& .step {

text-align: center;

position: absolute;

display: inline-block;

font-size: 18px;

font-weight: bold;

line-height: 30px;

width: 30px;

height: 30px;

border-radius: 50%;

border: 3px solid;

border-color: #d0d0d0;

background: #ffffff;

-webkit-transition: background-color 0.6s ease, border-color 0.6s ease;

-o-transition: background-color 0.6s ease, border-color 0.6s ease;

transition: background-color 0.6s ease, border-color 0.6s ease;

}

& .title {

text-decoration: underline;

position: absolute;

width: 100%;

left: 20px;

padding-top: 42px;

color: #777;

-webkit-transition: color 0.6s ease;

-o-transition: color 0.6s ease;

transition: color 0.6s ease;

}

&.active {

.step {

border-color: #3B5343;

color: #3b5343;

}

.title {

text-decoration: none;

color: #3b5343;

font-weight: bold;

}

&.done .title {

color: #3b5343;

&:hover {

color: #3B5343;

}

&.done .step {

color: white;

background-color: #3B5343;

border-color: #3B5343;

}

& > a {

display: block;

width: 100%;

color: #777;

position: relative;

text-align: center;

&:hover {

& .step {

border-color: #3b5343;

background: #eee;

color: #3b5343;

}

& .title {

color: #3b5343;

}

@media only screen and (max-width: 1200px) {

.step-wizard li {

width: 24%;

}

@media only screen and (max-width: 375px) {

.step-wizard li {

width: 22%;

}

li.done a span.step {

font-size: 0;

}

li.done a span.step::before {

content: "\2713 ";

font-size: 18px;

}

<< JS CODE>>

$(document).ready(function() {
  function setClasses(index, steps) {
    if (index < 0 || index > steps) return;
    if(index == 0) {
      $("#prev").prop('disabled', true);
    } else {
      $("#prev").prop('disabled', false);
    }
    if(index == steps) {
      $("#next").text('done');
    } else {
      $("#next").text('next');
    }
    $("ul li").each(function() {
      $(this).removeClass();
    });
    $("ul li:lt(" + index + ")").each(function() {
      $(this).addClass("done");
    });
    $("ul li:eq(" + index + ")").addClass("active")
    var p = index * (100 / steps);
    $("#prog").width(p + '%');
  }
  $(".step-wizard ul a").click(function() {
    var step = $(this).find("span.step")[0].innerText;
    var steps = $(".step-wizard ul li").length;
    setClasses(step - 1, steps - 1)
  });
  $("#prev").click(function(){
    var step = $(".step-wizard ul li.active span.step")[0].innerText;
    var steps = $(".step-wizard ul li").length;    
    setClasses(step - 2, steps - 1);
  });
  $("#next").click(function(){
    if ($(this).text() == 'done') {
      alert("submit the form?!?")
    } else {
      var step = $(".step-wizard ul li.active span.step")[0].innerText;
      var steps = $(".step-wizard ul li").length;    
      setClasses(step, steps - 1);
    }
  });
  
  // initial state setup
  setClasses(0, $(".step-wizard ul li").length);
});

$(document).ready(function() {

function setClasses(index, steps) {

if (index < 0 || index > steps) return;

if(index == 0) {

$("#prev").prop('disabled', true);

} else {

$("#prev").prop('disabled', false);

}

if(index == steps) {

$("#next").text('done');

} else {

$("#next").text('next');

}

$("ul li").each(function() {

$(this).removeClass();

});

$("ul li:lt(" + index + ")").each(function() {

$(this).addClass("done");

});

$("ul li:eq(" + index + ")").addClass("active")

var p = index * (100 / steps);

$("#prog").width(p + '%');

}

$(".step-wizard ul a").click(function() {

var step = $(this).find("span.step")[0].innerText;

var steps = $(".step-wizard ul li").length;

setClasses(step - 1, steps - 1)

});

$("#prev").click(function(){

var step = $(".step-wizard ul li.active span.step")[0].innerText;

var steps = $(".step-wizard ul li").length;

setClasses(step - 2, steps - 1);

});

$("#next").click(function(){

if ($(this).text() == 'done') {

alert("submit the form?!?")

} else {

var step = $(".step-wizard ul li.active span.step")[0].innerText;

var steps = $(".step-wizard ul li").length;

setClasses(step, steps - 1);

}

});

// initial state setup

setClasses(0, $(".step-wizard ul li").length);

});