Fully responsive progress bar

Question

I have to create a progress bar that has to be fully responsive. In order to be responsive I don't want the progress bar class to have a fixed width, but when I put auto in width, line of progress bar is detached from the star also if I give to them auto width

Fixed width: look good

Width auto

First how can I fix this issue, and perhaps someone can help me achieve this progress bar to be responsive on mobile also so that the line of progress bar will be vertical.

.progress-bar {
  width: 750px;
  display: flex;
  margin: 40px 0;
}

.progress-bar .step {
  text-align: center;
  width: 100%;
}

.progress-bar .step .bullet {
  position: relative;
  height: 25px;
  width: 25px;
  display: inline-block;
}

.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet::after {
  display: none;
}

.progress-bar .step .bullet:before,
.progress-bar .step .bullet::after {
  position: absolute;
  content: "";
  height: 3px;
  right: -136px;
  bottom: 11px;
  width: 142px;
  background: #C1C1C1;
}

.active-bullet {
  z-index: 1;
}

.active-check {
  z-index: 2;
}

<div class="progress-bar">
  <div class="step">

    <div class="bullet active-bullet">
      <img src="star-pb-active.svg">
    </div>
    <div class="check active-check" style="
            border-bottom: 2px solid black;
            padding: 2px;
            DISPLAY: table-cell;
            LEFT: 40px;
            POSITION: relative;
        ">Order placed</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Jewerly Creation</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Packing & Quality Control</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Shipped</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Estimated Delivery</div>
  </div>
</div>

Answer 1

try below code, your code some confusion.

1. use flex in css
2. below sample add one button which goes your activity to next step
3. it is fully responsive - on desktop this code horizontal and on mobile this code show vertical progressbar.
4. just use small js, css and for tick icon font awesome js. if any query comment it.

let step = 'step1';

const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');
const step3 = document.getElementById('step3');
const step4 = document.getElementById('step4');

function next() {
  if (step === 'step1') {
    step = 'step2';
    step1.classList.remove("is-active");
    step1.classList.add("is-complete");
    step2.classList.add("is-active");

  } else if (step === 'step2') {
    step = 'step3';
    step2.classList.remove("is-active");
    step2.classList.add("is-complete");
    step3.classList.add("is-active");

  } else if (step === 'step3') {
    step = 'step4d';
    step3.classList.remove("is-active");
    step3.classList.add("is-complete");
    step4.classList.add("is-active");

  } else if (step === 'step4d') {
    step = 'complete';
    step4.classList.remove("is-active");
    step4.classList.add("is-complete");

  } else if (step === 'complete') {
    step = 'step1';
    step4.classList.remove("is-complete");
    step3.classList.remove("is-complete");
    step2.classList.remove("is-complete");
    step1.classList.remove("is-complete");
    step1.classList.add("is-active");
  }
}

.progress-bar {
  position: relative;
  display: flex;
}
.progress-bar .progress-track {
  position: absolute;
  top: 5px;
  width: 100%;
  height: 5px;
  background-color: #dfe3e4;
  z-index: -1;
}
.progress-bar .progress-step {
  position: relative;
  width: 100%;
  font-size: 12px;
  text-align: center;
}
.progress-bar .progress-step:last-child:after {
  display: none;
}

.progress-bar .progress-step:before {
  content: "\f00c";
  display: flex;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 4px solid #dfe3e4;
  border-radius: 100%;
  color: transparent;
}
.progress-bar .progress-step:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 0%;
  transition: width 1s ease-in;
  height: 5px;
  background: #dfe3e4;
  z-index: -1;
}

@media screen and (max-width:700px) {
    .progress-bar {
      position: relative;
      display: inline-block;
    }
    .progress-bar .progress-track {
      position: absolute;
      top: -10px;
      width: 100%;
      height: 5px;
      background-color: #dfe3e4;
      z-index: -1;
      transform: rotate(90deg);
    }
    .progress-bar .progress-step {
      position: relative;
      width: 100%;
      font-size: 12px;
      text-align: center;
    }
    .progress-bar .progress-step:last-child:after {
      display: none;
    }

    .progrestext
    {
      left: 44px;
      position: absolute;
      top: 0px;
    }
    .progress-bar .progress-step:after {
      content: "";
      position: absolute;
      top: 20px;
      left: 0%;
      width: 0%;
      transition: width 1s ease-in;
      height: 5px;
      background: #dfe3e4;
      z-index: -1;
      transform: rotate(90deg);
    }
}

.progress-bar .progress-step.is-active {
  color: #2183dd;
}
.progress-bar .progress-step.is-active:before {
  border: 4px solid #777;
  animation: pulse 2s infinite;
}
.progress-bar .progress-step.is-complete {
  color: #009900;
}
.progress-bar .progress-step.is-complete:before {
  font-family: FontAwesome;
  font-size: 10px;
  color: #fff;
  background: #009900;
  border: 4px solid transparent;
}
.progress-bar .progress-step.is-complete:after {
  background: #2183dd;
  animation: nextStep 1s;
  animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(33, 131, 221, 0.8);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(33, 131, 221, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(33, 131, 221, 0);
  }
}
@keyframes nextStep {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.container {
  margin: 50px 100px;
}
button {
  position: absolute;
  right: 50px;
  bottom: 20px;
  cursor: pointer;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/c47bc38e87.js"></script>
<div class="container">
  <div class="progress-bar">
    <div class="progress-track"></div>
    <div id="step1" class="progress-step">
      <div class="progrestext">placed</div>
    </div>
    <div id="step2" class="progress-step">
      <div class="progrestext">Creation</div>
    </div>
    <div id="step3" class="progress-step">
      <div class="progrestext">Packing</div>
    </div>
    <div id="step4" class="progress-step">
      <div class="progrestext">Delivered</div>
    </div>
  </div>

  <button onClick=next()>Next Step</button>
</div>

Answer 2

It works the way you want, in fixed or auto width.

.progress-bar {
  width: auto;
  display: flex;
  margin: 40px 0;
}

.progress-bar .step {
  text-align: center;
  position: relative;
  isolation: isolate;
  width: 100%;
}

.progress-bar .step::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 3px;
  top: 12px;  /* 1/2 of .bullet's height */
  width: 100%;
  background: #C1C1C1;
}

.progress-bar .step:last-child::after {
  display: none;
}

.progress-bar .step .bullet {
  position: relative;
  height: 25px;
  width: 25px;
  display: inline-block;
}

.active-bullet {
  z-index: 1;
}

.active-check {
  z-index: 2;
}

Added pseudo element on the parent of .bullet. Also you don't need ::before, one of those pseudo elements was enough.

Answer 3

You should try taking a look at the flex-grow property from Flexbox. By giving display: flex to the parent, and flex-grow: 1 to the children, you should be able to make every step be the same size and take all the width of their container.