Add rounded progress line to progress bar - html

Question

I'm currently trying to program a progress bar:
.create-progress-bar {
padding: 0 !important;
margin: 25px 0;
display: flex;
}
.create-progress-bar li {
display: flex;
flex-direction: column;
list-style-type: none;
position: relative;
width: 33.3333333333%;
}
.create-progress-bar .step-inner-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.create-progress-bar li span.step-title {
text-transform: uppercase;
font-weight: 600;
}
.create-progress-bar li span.step-icon {
font-size: 22px;
padding: 18px;
border: 3px solid;
border-radius: 100%;
margin-bottom: 6px;
font-weight: 600;
width: 26px;
text-align: center;
}
.create-progress-bar li:first-child {
align-items: flex-start;
}
.create-progress-bar li:nth-child(2) {
align-items: center;
}
.create-progress-bar li:last-child {
align-items: flex-end;
}
.create-progress-bar li::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background: #666666;
border-radius: 3px;
top: 31px;
left: -50%;
z-index: -1;
}
<ul class="create-progress-bar">
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Create</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Done</span>
</span>
</li>
</ul>
Now I've the problem that I can't get the progress bars styled between each elements. It should look like this depending on the class active in each li element:
Is there someone how has an idea how to get this done?

Answer 1

You can do this using flexbox and :before pseudo-elements. You can create line before every li element except the first one and if the li has active class you change border color and line color.
ul {
display: flex;
align-items: center;
justify-content: space-between;
list-style-type: none;
padding-left: 0;
margin-bottom: 50px;
}
li:not(:first-child) {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
li:not(:first-child):before {
flex: 1;
height: 1px;
background: black;
content: '';
margin: 0 10px;
}
li.active .step-inner-wrapper {
border-color: red;
color: red;
}
li.active:before {
background: red;
}
.step-inner-wrapper {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
border-radius: 50%;
position: relative;
}
.step-title {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
}
<ul class="create-progress-bar">
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Create</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Done</span>
</span>
</li>
</ul>
<ul class="create-progress-bar">
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Create</span>
</span>
</li>
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Done</span>
</span>
</li>
</ul>

Answer 2

So I changed your CSS completely and made some minor changes to your HTML structure. This is my fiddle:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.progress-bar {
display: flex;
width: 100%;
justify-content: space-around;
flex-flow: row;
align-items: center;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.progress-bar>li:first-child {
width: auto;
}
.progress-bar>li:first-child .line {
display: none;
}
.progress-bar>li.active .tick {
border-color: red;
color: red;
}
.progress-bar>li.active .line {
background: red;
}
.progress-bar>li {
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
}
.tick {
border-radius: 100%;
border: 5px solid black;
height: 30px;
width: 30px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
position: relative;
}
.tick>span {
position: absolute;
top: 70px;
}
.line {
width: 100%;
height: 5px;
display: block;
background: black;
margin: 0 15px;
}
<ul class="progress-bar">
<li class="active">
<div class="line"></div>
<div class="tick">
✔<span>CREATE</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>CHECK</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>DONE</span>
</div>
</li>
</ul>
You will see that I removed the approach of using pseudo-classes, such as ::after, and added a div.line instead. In CSS I removed the first progress line with display: none instead of removing the div tag because it is easier to use dynamically since you don't have to care about removing the first line when prepending content. But you can also just remove it like here:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.progress-bar {
display: flex;
width: 100%;
justify-content: space-around;
flex-flow: row;
align-items: center;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.progress-bar>li:first-child {
width: auto;
}
.progress-bar>li.active .tick {
border-color: red;
color: red;
}
.progress-bar>li.active .line {
background: red;
}
.progress-bar>li {
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
}
.tick {
border-radius: 100%;
border: 5px solid black;
height: 30px;
width: 30px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
position: relative;
}
.tick>span {
position: absolute;
top: 70px;
}
.line {
width: 100%;
height: 5px;
display: block;
background: black;
margin: 0 15px;
}
<ul class="progress-bar">
<li class="active">
<div class="tick">
✔<span>CREATE</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>CHECK</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>DONE</span>
</div>
</li>
</ul>
Edit #1
Based on the comments, here is a version with a soft hyphen:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.progress-bar {
display: flex;
width: 100%;
justify-content: space-around;
flex-flow: row;
align-items: center;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.progress-bar>li:first-child {
width: auto;
}
.progress-bar>li.active .tick {
border-color: red;
color: red;
}
.progress-bar>li.active .line {
background: red;
}
.progress-bar>li {
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
}
.tick {
border-radius: 100%;
border: 5px solid black;
height: 30px;
width: 30px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
position: relative;
}
.tick>span {
position: absolute;
top: 70px;
max-width: 100px;
text-align: center;
}
.line {
width: 100%;
height: 5px;
display: block;
background: black;
margin: 0 15px;
}
<ul class="progress-bar">
<li class="active">
<div class="tick">
✔<span>CREATE­VERY­LONG­TEXT</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>CHECK</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>DONE</span>
</div>
</li>
</ul>
You could theoretically use hyphens: auto. But this has massive lack of browser support, as it can be seen here.
If you don't want the - dashes just use word-wrap: break-word;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.progress-bar {
display: flex;
width: 100%;
justify-content: space-around;
flex-flow: row;
align-items: center;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.progress-bar>li:first-child {
width: auto;
}
.progress-bar>li.active .tick {
border-color: red;
color: red;
}
.progress-bar>li.active .line {
background: red;
}
.progress-bar>li {
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
}
.tick {
border-radius: 100%;
border: 5px solid black;
height: 30px;
width: 30px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
position: relative;
}
.tick>span {
position: absolute;
top: 70px;
max-width: 100px;
text-align: center;
word-wrap: break-word;
}
.line {
width: 100%;
height: 5px;
display: block;
background: black;
margin: 0 15px;
}
<ul class="progress-bar">
<li class="active">
<div class="tick">
✔<span>CREATEVERYLONGTEXT</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>CHECK</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>DONE</span>
</div>
</li>
</ul>