Horizontal progess bar with SASS (CSS3) - html

Question

I'm creating and Angular2 component to achieve the following behavior:
I have an array (strings) in the component named "stepList". This is my view:
<ul class="step">
<li class="step__item selected" *ngFor="let step of stepList">
{{step.label}}
</li>
</ul>
And this is my CSS:
.step{
display: flex;
&__item {
display: block;
padding-left: 25px;
}
}
With the current code, I have the items (names) rendered, but I don't know how to get the line with the circles underneath them.
Thanks in advance!

Answer 1

Use a border-bottom and a pseudo element:
.step{
display: flex;
}
.step__item {
display: block;
position: relative;
padding: 0 12px 25px;
border-bottom: 1px solid lightgray;
}
.step__item::before {
display: block;
position: absolute;
bottom: -5px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
content: '';
}
<ul class="step">
<li class="step__item selected">
CATEGORIA
</li>
<li class="step__item selected">
ATTRIBUTES
</li>
</ul>
And the SCSS code:
.step{
display: flex;
&__item {
display: block;
position: relative;
padding: 0 12px 25px;
border-bottom: 1px solid lightgray;
&::before {
display: block;
position: absolute;
bottom: -5px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
content: '';
}
}
}

Answer 2

Padding on the label with a border-bottom to get the line. Create a div with a set height and width (so, for a circle, use the same height and width), forming a square. Add a border-radius of 50% which will make it circular in shape and put the div inside the label. Position absolutely so that it appears over the border-bottom.

Answer 3

http://jsfiddle.net/exjxw7m6/
ul.progress-bar {
height: 300px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
&::after {
content: "";
position: absolute;
top:5px;
left:5px;
background: #777;
height: 5px;
width: 100%;
}
li {
background: #000;
border-radius: 100px;
width: 15px;
height: 15px;
z-index: 1;
position: relative;
&.stop ~ li {
background: #777;
&::after {
height: 0;
}
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 5px;
background: #000;
width: 5px;
height: 100vh;
}
}
}
more info here: (credit) Progress bar made of solid line, with dots as steps