Show progress half way in li using css - html

Question

Something like below:
My Less looks as below at the moment.
/*progressbar*/
.progressbar {
margin-bottom: 30px;
margin-top: 10px;
counter-reset: step;
clear: both;
}
.progressbar li {
font-size: 12px;
width: 24%;
float: left;
position: relative;
text-align: center;
&:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 13px;
display: block;
font-size: 12px;
color: transparent;
border: 6px solid #ececec ;
background: #27ae60 ;
border-radius: 19px;
margin: 0 auto 4px;
}
&:after {
content: '';
width: 85%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: -42%;
top: 10px;
z-index: 0;
}
&:first-child:after {
content: none;
}
}
.progress-payment li {
width: 50%;
}
.progressbar li.active{
&:after, &:before {
background: #success-btn;
color: #success-btn;
}
}
HTML
<ul class="progressbar">
<li class="active">Order Placed</li>
<li>Shipped</li>
<li>Completed</li>
<li>Settled</li>
</ul>
Please help

Answer 1

You can do this by using a linear-gradient background for the pseudo element that is producing the bar. The gradient is half-and-half, with completed color for first half and the pending color for rest.
/*progressbar*/
.progressbar {
margin-bottom: 30px;
margin-top: 10px;
counter-reset: step;
clear: both;
list-style: none;
}
.progressbar li {
font-size: 12px;
width: 24%;
float: left;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 25px;
display: block;
font-size: 12px;
color: transparent;
border: 6px solid #ececec;
background: #27ae60;
border-radius: 19px;
margin: 0 auto 4px;
}
.progressbar li:after {
content: '';
width: 85%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: -42%;
top: 17px;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progress-payment li {
width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
background: #27ae60;
color: white;
}
.progressbar li.complete:after {
background: #27ae60;
}
.progressbar li.half-complete:after {
background: linear-gradient(to right, #27ae60 50%, #B9B9B9 50%);
color: white;
}
<ul class="progressbar">
<li class="complete">Order Placed</li>
<li class="complete">Shipped</li>
<li class="active">Completed</li>
<li class="half-complete">Settled</li>
</ul>
If you want a slightly curved half-fill for the progress bar then you could use radial-gradient for the background like in the below snippet.
/*progressbar*/
.progressbar {
margin-bottom: 30px;
margin-top: 10px;
counter-reset: step;
clear: both;
list-style: none;
}
.progressbar li {
font-size: 12px;
width: 24%;
float: left;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 25px;
display: block;
font-size: 12px;
color: transparent;
border: 6px solid #ececec;
background: #27ae60;
border-radius: 19px;
margin: 0 auto 4px;
}
.progressbar li:after {
content: '';
width: 85%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: -42%;
top: 17px;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progress-payment li {
width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
background: #27ae60;
color: white;
}
.progressbar li.complete:after {
background: #27ae60;
}
.progressbar li.half-complete:after {
background: radial-gradient(50% 300% at 25% 50%, #27ae60 50%, #B9B9B9 40%);
color: white;
}
<ul class="progressbar">
<li class="complete">Order Placed</li>
<li class="complete">Shipped</li>
<li class="active">Completed</li>
<li class="half-complete">Settled</li>
</ul>
Note: Both the solutions assume that your target browsers are those that support gradients (IE10+).

Answer 2

Another approach is to use animation for this.
Since you are already using both pseudoelements in your list items. We will use a pseudoelement in the ul element to provide the empty progress line.
We will keep your other classes just for demo purposes but you can optimize this method way further. The principle would have to change to take into consideration the whole process from 0 to 100% from step 1 to 4, not to 1 to 2, 2 to 3, etc.
Here we go:
First we create our pseudoelement in the ul element just for the grey fallback.
.progressbar::after {
content: '';
width: 68%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: 17%;
top: 17px;
z-index: -2;
}
Then we scale down the ::after pseudoelement of the list item to 0 in the main axis. (use one : if you are providing older browser support).
Here we are keeping your class just as a selector, like I previously said you can make this even better but it would require changing some logic.
Here we also declare an animation we will create in the next step. What will it do? It will just scale back to 1 our pseudoelement.
.progressbar li.half-complete:after {
transform: scaleX(0);
color: white;
animation: fill 100ms linear forwards;
background-color: #27ae60;
}
We define the keyframe:
#keyframes fill {
to {
transform: scaleX(1);
}
}
So far we get this:
/*progressbar*/
.progressbar {
margin-bottom: 30px;
margin-top: 10px;
counter-reset: step;
clear: both;
list-style: none;
position: relative;
}
.progressbar li {
font-size: 12px;
width: 24%;
float: left;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 25px;
display: block;
font-size: 12px;
color: transparent;
border: 6px solid #ececec;
background: #27ae60;
border-radius: 19px;
margin: 0 auto 4px;
}
.progressbar li:after {
content: '';
width: 85%;
height: 3px;
position: absolute;
left: -42%;
top: 17px;
z-index: -1;
}
.progressbar::after {
content: '';
width: 68%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: 17%;
top: 17px;
z-index: -2;
}
.progressbar li:first-child:after {
content: none;
}
.progress-payment li {
width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
background: #27ae60;
color: white;
}
.progressbar li.half-complete:before {
color: white;
}
.progressbar li.complete:after {
background: #27ae60;
}
.progressbar li.half-complete:after {
transform: scaleX(0);
color: white;
animation: fill 3s linear forwards;
background-color: #27ae60;
}
#keyframes fill {
to {
transform: scaleX(1);
}
}
<ul class="progressbar">
<li class="complete">Order Placed</li>
<li class="complete">Shipped</li>
<li class="active">Completed</li>
<li class="half-complete">Settled</li>
</ul>
We are not quite there yet, we got the animation, but it starts from the center and we want a specific frame, when the bar is at 50%.
Since the browser creates multiple frames when you create an animation, you can get the one you want with the property animation-delay, normally you would use a positive value, but when you use a negative one, the animation starts from that point.
Lets make the animation start from the left with transform-origin: left and finish all the way to the right without using animation-delay yet:
/*progressbar*/
.progressbar {
margin-bottom: 30px;
margin-top: 10px;
counter-reset: step;
clear: both;
list-style: none;
position: relative;
}
.progressbar li {
font-size: 12px;
width: 24%;
float: left;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 25px;
display: block;
font-size: 12px;
color: transparent;
border: 6px solid #ececec;
background: #27ae60;
border-radius: 19px;
margin: 0 auto 4px;
}
.progressbar li:after {
content: '';
width: 85%;
height: 3px;
position: absolute;
left: -42%;
top: 17px;
z-index: -1;
}
.progressbar::after {
content: '';
width: 68%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: 17%;
top: 17px;
z-index: -2;
}
.progressbar li:first-child:after {
content: none;
}
.progress-payment li {
width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
background: #27ae60;
color: white;
}
.progressbar li.half-complete:before {
color: white;
}
.progressbar li.complete:after {
background: #27ae60;
}
.progressbar li.half-complete:after {
transform: scaleX(0);
color: white;
animation: fill 3s linear forwards;
transform-origin: left;
background-color: #27ae60;
}
#keyframes fill {
to {
transform: scaleX(1);
}
}
<ul class="progressbar">
<li class="complete">Order Placed</li>
<li class="complete">Shipped</li>
<li class="active">Completed</li>
<li class="half-complete">Settled</li>
</ul>
Now using an animation-delay with a negative value:
/*progressbar*/
.progressbar {
margin-bottom: 30px;
margin-top: 10px;
counter-reset: step;
clear: both;
list-style: none;
position: relative;
}
.progressbar li {
font-size: 12px;
width: 24%;
float: left;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 25px;
display: block;
font-size: 12px;
color: transparent;
border: 6px solid #ececec;
background: #27ae60;
border-radius: 19px;
margin: 0 auto 4px;
}
.progressbar li:after {
content: '';
width: 85%;
height: 3px;
position: absolute;
left: -42%;
top: 17px;
z-index: -1;
}
.progressbar::after {
content: '';
width: 68%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: 17%;
top: 17px;
z-index: -2;
}
.progressbar li:first-child:after {
content: none;
}
.progress-payment li {
width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
background: #27ae60;
color: white;
}
.progressbar li.half-complete:before {
color: white;
}
.progressbar li.complete:after {
background: #27ae60;
}
.progressbar li.half-complete:after {
transform: scaleX(0);
color: white;
animation: fill 3s linear forwards;
transform-origin: left;
animation-delay: -1.5s;
background-color: #27ae60;
}
#keyframes fill {
to {
transform: scaleX(1);
}
}
<ul class="progressbar">
<li class="complete">Order Placed</li>
<li class="complete">Shipped</li>
<li class="active">Completed</li>
<li class="half-complete">Settled</li>
</ul>
Since the total duration of the animation in the demo is 3s you just use half that as a negative value to get the 50%, see how the animation starts from there.
Then we just use animation-play-state: paused; to prevent the transition.
/*progressbar*/
.progressbar {
margin-bottom: 30px;
margin-top: 10px;
counter-reset: step;
clear: both;
list-style: none;
position: relative;
}
.progressbar li {
font-size: 12px;
width: 24%;
float: left;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 25px;
display: block;
font-size: 12px;
color: transparent;
border: 6px solid #ececec;
background: #27ae60;
border-radius: 19px;
margin: 0 auto 4px;
}
.progressbar li:after {
content: '';
width: 85%;
height: 3px;
position: absolute;
left: -42%;
top: 17px;
z-index: -1;
}
.progressbar::after {
content: '';
width: 68%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: 17%;
top: 17px;
z-index: -2;
}
.progressbar li:first-child:after {
content: none;
}
.progress-payment li {
width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
background: #27ae60;
color: white;
}
.progressbar li.half-complete:before {
color: white;
}
.progressbar li.complete:after {
background: #27ae60;
}
.progressbar li.half-complete:after {
transform: scaleX(0);
color: white;
animation: fill 3s linear forwards;
transform-origin: left;
animation-delay: -1.5s;
animation-play-state: paused;
background-color: #27ae60;
}
#keyframes fill {
to {
transform: scaleX(1);
}
}
<ul class="progressbar">
<li class="complete">Order Placed</li>
<li class="complete">Shipped</li>
<li class="active">Completed</li>
<li class="half-complete">Settled</li>
</ul>
We can then clean it a little bit and in this demo we use some javascript to see how this can be manipulated:
.progressbar li.half-complete:after {
transform: scaleX(0);
color: white;
animation: fill 100ms linear forwards; /* Use an easier value to represent percentages in a progress bar*/
transform-origin: left;
animation-delay: inherit; /* We inherit the animation-delay from the `li` element, which we can easily manipulate with javascript*/
animation-play-state: paused;
background-color: #27ae60;
}
Final Result:
var progress = document.getElementById("progress");
var progressBarLastItem = document.querySelector(".progressbar li:last-child");
progress.addEventListener("change", function() {
progressBarLastItem.style.animationDelay = "-" + this.value + "ms";
});
/*progressbar*/
.progressbar {
margin-bottom: 30px;
margin-top: 10px;
counter-reset: step;
clear: both;
list-style: none;
position: relative;
}
.progressbar li {
font-size: 12px;
width: 24%;
float: left;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 25px;
display: block;
font-size: 12px;
color: transparent;
border: 6px solid #ececec;
background: #27ae60;
border-radius: 19px;
margin: 0 auto 4px;
}
.progressbar li:after {
content: '';
width: 85%;
height: 3px;
position: absolute;
left: -42%;
top: 17px;
z-index: -1;
}
.progressbar::after {
content: '';
width: 68%;
height: 3px;
background: #B9B9B9;
position: absolute;
left: 17%;
top: 17px;
z-index: -2;
}
.progressbar li:first-child:after {
content: none;
}
.progress-payment li {
width: 50%;
}
.progressbar li.active:after,
.progressbar li.active:before {
background: #27ae60;
color: white;
}
.progressbar li.half-complete:before {
color: white;
}
.progressbar li.complete:after {
background: #27ae60;
}
.progressbar li.half-complete:after {
transform: scaleX(0);
color: white;
animation: fill 100ms linear forwards;
transform-origin: left;
animation-delay: inherit;
animation-play-state: paused;
background-color: #27ae60;
}
#keyframes fill {
to {
transform: scaleX(1);
}
}
<ul class="progressbar">
<li class="complete">Order Placed</li>
<li class="complete">Shipped</li>
<li class="active">Completed</li>
<li class="half-complete">Settled</li>
</ul>
<input id="progress" type="range" min="0" max="100">