How to make a responsive step bar in html css - css

Question

I want to make a responsive step bar with year on top side of step circle and text in bottom of the circle like this one:
Here is my html code.
<div class="container">
<ul class="progressbar">
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li id="last-child"></li>
</ul>
</div>
Demo
The problem is I am not getting how to add these years, circle in start and arrow in the end. Please help me how I can do this and make it responsive.I'll be very thankful to you for your help.

Answer 1

Hope this helps. thanks
.container {
width: 1000px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16.6%;
float: left;
font-size: 10px;
position: relative;
text-align: center;
color: #444972;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 3px solid #444972;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 3px;
content: '';
position: absolute;
background-color: #444972;
top: 15px;
left: -50%;
z-index: -1;
}
#last-child:after {
width: 100%;
height: 3px;
content: '';
position: absolute;
background-color: #444972;
top: 15px;
left: -50%;
z-index: -1;
}
#last-child:before {
display: none;
}
.progressbar li:first-child:after {
/*content: none;*/
}
#circle{
font-size: 24px;
position: absolute;
left: 7%;
top: 16.29%;
color: #444972;
}
.outer{position:realative}
.year{
position: absolute;
top: -40px;
left: 50%;
transform: translatex(-50%);
}
.progressbar{position:relative;}
.progressbar:before{
content: "";
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
left: -10px;
top: 12px;
}
.progressbar:after{
content: "";
position: absolute;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 10px solid black;
right: 63px;
top: 5px;
}
<div class="container">
<ul class="progressbar">
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li id="last-child"></li>
</ul>
</div>

Answer 2

use label with in your li and try this
label{
position: absolute;
top:-40%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
font-size:18px;
}
.container {
width: 1000px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16.6%;
float: left;
font-size: 10px;
position: relative;
text-align: center;
color: #444972;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 3px solid #444972;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 3px;
content: '';
position: absolute;
background-color: #444972;
top: 15px;
left: -50%;
z-index: -1;
}
#last-child:after {
width: 100%;
height: 3px;
content: '';
position: absolute;
background-color: #444972;
top: 15px;
left: -50%;
z-index: -1;
}
#last-child:before {
display: none;
}
.progressbar li:first-child:after {
/*content: none;*/
}
#circle{
font-size: 24px;
position: absolute;
left: 7%;
top: 16.29%;
color: #444972;
}
label{
position: absolute;
top:-40%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
font-size:18px;
}
/*for circle use this class*/
.dot {
height: 18px;
width: 18px;
background-color: #444972;
border-radius: 50%;
display: inline-block;
position: absolute;
top:8px;
left: -60%;
bottom: 0;
right: 0;
}
/*for triangle use this class*/
.triangle {
width: 0;
height: 0;
overflow: hidden;
}
.triangle:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top:5px;
margin-left:78px;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #444972;
}
<div class="container">
<ul class="progressbar">
<li>
<span class="dot"></span>
<label>1998</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>
<label>2004</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>
<label>2006</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>
<label>2014</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>
<label>2015</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li id="last-child">
<span class="triangle"></span>
</li>
</ul>
</div>