Managing shipment progress bar in percentage using HTML CSS JS

Question

I have the below code where I am trying to show the shipment progress. I want such that I want to show place B point based on how much distance is covered. For example : If 70% of total distance is completed, progress bar will show PLACE B point on 70% of the width of total progress bar. Could you please help, whatever I tried it is breaking the whole thing, yes I am noob. Please help.

.progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #849397;
}
.progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 0.8em;
}
.progress > li:before {
  content: '';
  display: block;
  margin: 0 auto;
  background: #dfe3e4;
  width: 3em;
  height: 3em;
  text-align: center;
  margin-bottom: 0.25em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.progress > li:after {
  content: "";
  position: absolute;
  display: block;
  background: #dfe3e4;
  width: 100%;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}
.progress > li:last-child:after {
  display: none;
}
.progress > li.is-complete {
  color: #2ecc71;
}
.progress > li.is-complete:before, .progress > li.is-complete:after {
  color: #fff;
  background: blue;
}
.progress > li.is-active {
  color: blue;
}
.progress > li.is-active:before {
  color: #fff;
  background: green;
}

/**
   * Needed for IE8
   */
.progress__last:after {
  display: none !important;
}


/**
 * Some Generic Stylings
 */
*,
*:after,
*:before {
  box-sizing: border-box;
}

<ol class="progress">
  <li class="is-complete"  data-step="1">
    Place A
  </li>
  <li class="is-active" data-step="2">
    Place B
  </li>
  <li data-step="3" class="progress__last">
    Place C
  </li>
</ol>

JS Bin Demo

score 0 · Answer 1 · answered Sep 29 '20 at 14:51

The basic idea is to have 2 elements that connect your circles: one with the background color and one with the active color. Then you will have to inject the real width value from JS of from the backend, based on your real application.

Here an example made from your code:

.progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #849397;
}
.progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 0.8em;
}
.progress > li:before {
  content: '';
  display: block;
  margin: 0 auto;
  background: #dfe3e4;
  width: 3em;
  height: 3em;
  text-align: center;
  margin-bottom: 0.25em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.progress > li:after {
  content: "";
  position: absolute;
  display: block;
  background: #dfe3e4;
  width: 100%;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}

.progress span.path:after {
  content: "";
  position: absolute;
  display: block;
  background: #dfe3e4;
  width: 100%;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}

.progress > li:last-child:after {
  display: none;
}
.progress > li.is-complete {
  color: #2ecc71;
}
.progress > li.is-complete:before, .progress > li.is-complete:after {
  color: #fff;
  background: blue;
}
.progress > li.is-complete:after {
  width: 70%;
}

.progress > li.is-active {
  color: blue;
}
.progress > li.is-active:before {
  color: #fff;
  background: green;
}

/**
   * Needed for IE8
   */
.progress__last:after {
  display: none !important;
}


/**
 * Some Generic Stylings
 */
*,
*:after,
*:before {
  box-sizing: border-box;
}

<ol class="progress">
  <li class="is-complete"  data-step="1">
    <span class="path"></span>
    Place A
  </li>
  <li class="is-active" data-step="2">
    Place B
  </li>
  <li data-step="3" class="progress__last">
    Place C
  </li>
</ol>

hey thanks for the answer, but place B do not move to 70% width. — Ben, Sep 29 '20 at 14:56
Could you please help me with this. Yesterday was the deadline of submission. Could you please give me a demo where "Place B" point I can move to anywhere in the total width percent, so that I can change that value via JS. — Ben, Sep 29 '20 at 16:07

score 0 · Accepted Answer · answered Sep 29 '20 at 17:04

0

Try below example

.progress {
        padding: 40px 0;
        position: relative;
      }
      .progress::before,
      .progress::after {
        content: "";
        background-color: #dfe3e4;
        height: 0.5em;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
      }
      .progress::before {
        width: 100%;
      }
      .progress::after {
        width: 70%;
        background: #008000;
      }
      .progress li {
        position: relative;
        list-style: none;
        z-index: 1;
        display: inline-block;
      }
      .progress li:first-child {
        left: 0;
      }
      .progress li.is-active {
        left: 70%;
        position: absolute;
      }
      .progress li:last-child {
        float: right;
      }
      .progress > li:before {
        content: "";
        display: block;
        margin: 0 auto;
        background: #dfe3e4;
        width: 3em;
        height: 3em;
        text-align: center;
        line-height: 3em;
        border-radius: 100%;
        position: relative;
        z-index: 1000;
      }
      .progress li:first-child:before {
        background: #0000ff;
      }
      .progress li.is-active:before {
        background: #008000;
      }
      .progress li span {
        position: absolute;
        bottom: -20px;
        width: max-content;
      }

<ol class="progress">
      <li class="is-complete" data-step="1"><span>Place A</span></li>
      <li class="is-active" data-step="2"><span>Place B</span></li>
      <li data-step="3" class="progress__last"><span>Place C</span></li>
    </ol>

answered Sep 29 '20 at 17:04

Rohit Utekar

828
5
10

wow thats what I wanted, you are genius. I have made following changes, but it does not show place name (Place A Place B and Place C ) properly in center of dots. Here demo https://jsbin.com/faqipotayu/edit?html,css,output . Can you do something? – Ben Sep 29 '20 at 19:05
Add `left: 50%; transform: translateX(-50%);` styles to the span. Check this code: https://jsbin.com/zodivicuna/edit?html,css,output – Rohit Utekar Sep 29 '20 at 19:15
Thats really cool. If place name is big ,the text gets cut. So I will increase the margin like this `.progress-wrapper {margin: 0 100px;}` . Is it a good solution ? – Ben Sep 29 '20 at 19:53
If there is no space around the wrapper, then the large text will get cut, as we have set absolute position to the element. One option is to increase the side space of the parent as you have mentioned. Another option is to left-align the title of the first step and right-align the title of the last step, this way it will always remain within the bounds. – Rohit Utekar Sep 29 '20 at 20:02
hey Rohit but how will I set width property of :`after` element of progress div by javascript? To make it dynamic? – Ben Sep 30 '20 at 00:48
Rohit , please check this https://stackoverflow.com/questions/64129634/progress-bar-handling-via-javascript – Ben Sep 30 '20 at 01:17
It looks like your query is already resolved. https://stackoverflow.com/questions/64129634/progress-bar-handling-via-javascript/64129720#64129720 Check this revised code as well: https://jsbin.com/yowacag/edit?html,css,output – Rohit Utekar Sep 30 '20 at 05:26

Managing shipment progress bar in percentage using HTML CSS JS

2 Answers2