Layout progress bars in-between nodes - HTML & CSS - html

Question

I'm trying to build a stepping wizard form layout with a bar at the top of the page containing a dynamic number of steps (nodes) and progress bars connecting the nodes. I'm having trouble getting the progress bars and nodes to cooperate.
The idea is to have each nodes spaced evenly on the page horizontally (already working nicely using flexbox), and the progress bars fluidly filling the gaps between the nodes.
I am currently trying to use an <li> to contain each iteration of the progress bar & <a> pairs, but it is not laying out like I need it to (the progress bars are not behaving fluidly and not filling empty space between the <a> tags).
Is this the best way to lay this out?
Just though I'd confirm this is the best way to lay these out before going any further.
EDIT 1 (Clarifying goal):
This image is an example of what I am trying to achieve.
The progress bar and red <a> node are both within the same <li>. I have given the progress bar a width of 90% for this example but the goal is to only assign a width to the red <a> node and have the project bar fluidly fill the remaining space.
Below is the HTML & SCSS I am currently using:
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Project Milestones</div>
</div>
<div class="panel-body">
<ul class="milestone-bar">
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
Milestone 1
</li>
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
Milestone 3
</li>
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
50%
</div>
</div>
Milestone 2
</li>
</ul>
</div>
</div>
ul.milestone-bar {
padding: 0;
margin: 0 0 15px 0;
display: flex;
li {
width: 100%;
list-style: none;
display: inline-block;;
a {
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 15px;
background-color: red;
float:right;
&:hover {
background: none;
border: 4px solid blue;
}
&:active {
background-color: darkblue;
}
&:focus {
background-color: green;
}
}
.project-progress {
background-color: #d3d3d3;
display: inline-block;
margin: 0;
}
}
}
Is this on the right track?
Below is a snippet of the above:
ul.milestone-bar {
padding: 0;
margin: 0 0 15px 0;
display: flex;
}
ul.milestone-bar li {
width: 100%;
list-style: none;
display: inline-block;
}
ul.milestone-bar li a {
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 15px;
background-color: red;
float: right;
}
ul.milestone-bar li a:hover {
background: none;
border: 4px solid blue;
}
ul.milestone-bar li a:active {
background-color: darkblue;
}
ul.milestone-bar li a:focus {
background-color: green;
}
ul.milestone-bar li .project-progress {
background-color: #d3d3d3;
display: inline-block;
margin: 0;
}
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Project Milestones</div>
</div>
<div class="panel-body">
<ul class="milestone-bar">
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
Milestone 1
</li>
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
Milestone 3
</li>
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
50%
</div>
</div>
Milestone 2
</li>
</ul>
</div>
</div>

Answer 1

So I did some changes to your code:
Added flex to each li to create nested flex children here:
ul.milestone-bar li {
width: 100%;
list-style: none;
display: flex;
}
Added flex: 1 for it to flex to the whole width and vertically align it to the center using align-self: center to your project-progress like this:
ul.milestone-bar li .project-progress {
background-color: #d3d3d3;
display: inline-block;
margin: 0;
flex: 1;
align-self: center
}
Added the progress bar style:
ul.milestone-bar li .project-progress .progress-bar {
background: #0095FF;
text-align: center;
}
Also adjusted the milestone-bar to look better:
ul.milestone-bar li a {
width: 60px;
height: 60px;
font-size: 10px;
border-radius: 50%;
background-color: red;
text-align: center;
line-height: 60px;
}
ul.milestone-bar li a:hover {
background: none;
border: 4px solid blue;
line-height: 52px;
}
To top it up, used box-sizing: border-box to all elements in the page for better management of border especially to remove the 'jumps' when you hover.
* {
box-sizing: border-box;
}
ul.milestone-bar {
padding: 0;
margin: 0 0 15px 0;
display: flex;
}
ul.milestone-bar li {
width: 100%;
list-style: none;
display: flex;
}
ul.milestone-bar li a {
width: 60px;
height: 60px;
font-size: 10px;
border-radius: 50%;
background-color: red;
text-align: center;
line-height: 60px;
}
ul.milestone-bar li a:hover {
background: none;
border: 4px solid blue;
line-height: 52px;
}
ul.milestone-bar li a:active {
background-color: darkblue;
}
ul.milestone-bar li a:focus {
background-color: green;
}
ul.milestone-bar li .project-progress {
background-color: #d3d3d3;
display: inline-block;
margin: 0;
flex: 1;
align-self: center
}
ul.milestone-bar li .project-progress .progress-bar {
background: #0095FF;
text-align: center;
}
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Project Milestones</div>
</div>
<div class="panel-body">
<ul class="milestone-bar">
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
Milestone 1
</li>
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
Milestone 3
</li>
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
50%
</div>
</div>
Milestone 2
</li>
</ul>
</div>
</div>
Let me know your feedback on this. Thanks!