Add next button to step loading bar

Check the next() and previous() functions below, which do what I think you’re striving for.

Also, it’s not obvious to me how your $(document).ready() function is necessary, and it might not be.

$(document).ready(function() {
  $('.step').each(function(index, element) {
    // element == this
    $('.done').html('<i class="icon-ok"></i>');
    if ($(this).is('.active')) {
      return false;

const iconClasses = ['far fa-hand-pointer', 'fas fa-mortar-pestle', 'fas fa-shipping-fast', 'fas fa-shopping-cart'];

function next() {
  //console.log("Next", Math.random());
  let latestActiveStep = $("").not(".done");
  let stepNumber = +$(latestActiveStep).data("stepnum");
  console.log("step", stepNumber);

function previous() {
  //console.log("Prev", Math.random());
  let latestDoneStep = $("").last();
  let stepNumber = +$(latestDoneStep).data("stepnum");
  console.log("step", stepNumber);
@import url(,400,700,600);
body {
  background-color: #e6e6e6;
  font-family: 'Open Sans', sans-serif;

#steps {
  width: 505px;
  margin: 50px auto;

.step {
  width: 40px;
  height: 40px;
  background-color: white;
  display: inline-block;
  border: 4px solid;
  border-color: transparent;
  border-radius: 50%;
  color: #cdd0da;
  font-weight: 600;
  text-align: center;
  line-height: 35px;

.step:first-child {
  line-height: 40px;

.step:nth-child(n+2) {
  margin: 0 0 0 100px;
  transform: translate(0, -4px);

.step:nth-child(n+2):before {
  width: 75px;
  height: 3px;
  display: block;
  background-color: white;
  transform: translate(-95px, 21px);
  content: '';

.step:after {
  width: 150px;
  display: block;
  transform: translate(-55px, 3px);
  color: #818698;
  content: attr(data-desc);
  font-weight: 400;
  font-size: 13px;

.step:first-child:after {
  transform: translate(-55px, -1px);
} {
  border-color: #73b5e8;
  color: #73b5e8;
} {
  background: linear-gradient(to right, #58bb58 0%, #73b5e8 100%);
} {
  color: #73b5e8;

.step.done {
  background-color: #58bb58;
  border-color: #58bb58;
  color: white;

.step.done:before {
  background-color: #58bb58;
<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <title>CodePen - loadingbar</title>
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="./style.css">
  <script src=""></script>


  <!-- partial:index.partial.html -->
  <link href="//" rel="stylesheet">
  <script src=""></script>
  <div id="steps">
    <div class="step active" data-stepnum="0" data-desc="Listing information"><i class="far fa-hand-pointer"></i><i class="icon-ok"></i></div>
    <div class="step" data-stepnum="1" data-desc="Photos & Details"><i class="fas fa-mortar-pestle"></i><i class="icon-ok"></i></div>
    <div class="step" data-stepnum="2" data-desc="Review & Post"><i class="fas fa-shipping-fast"></i><i class="icon-ok"></i></div>
    <div class="step" data-stepnum="3" data-desc="Your order"><i class="fas fa-shopping-cart"></i><i class="icon-ok"></i></div>

  <button onclick="previous()">Previous</button>
  <button onclick="next()">Next</button>

  Try adding the active class to another 'step'
  to see what's going on :)
  <!-- partial -->
  <script src=''></script>
  <script src="./script.js"></script>



CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top