Let's design something elegant and appealing!
Here is the final outcome:
https://i.sstatic.net/MPlBS.png
The HTML Structure
Utilize an ordered list to structure your content effectively:
<ol>
<li class="complete">Personal</li>
<li class="complete">Profile</li>
<li>Experience</li>
<li>Setting</li>
<li>Certificate</li>
<li>Submit</li>
</ol>
To mark a step as complete, simply add the complete class to change its background color.
The CSS Styling
The Counting Numbers
For an in-depth guide on using the counter property, check out Smashing Magazine.
The numbers are generated using a counter and displayed within the list items through CSS:
ol {
list-style: none;
counter-reset: counter;
}
ol li {
counter-increment: counter;
}
ol li::before {
content: counter(counter, decimal);
}
The numbers are positioned above the text using position: absolute.
The Progress Bar
Learn more about pseudo-elements from the MDN documentation.
Here's how the progress bar looks behind the numbers:
https://i.sstatic.net/r1Qwp.png
It's created using a ::before pseudo-element with a gradient background. Adjust the percentage values to reflect completion status:
ol::before {
content: '';
height: 8px;
background:
linear-gradient(to right, #BFA15F 0, #BFA15F 40%, #A8A9AD 40%, #A8A9AD 100%);
position: absolute;
left: 50px;
right: 50px;
top: 6px;
}
Customizing the Numbers
The numbers can be further styled using the ol li::before selector:
border-radius: 50% creates a circular shapetext-align: center and line-height: 20px center the number within the circle- Change the background color based on completion status
Complete Demo
Note: Avoid whitespace between list items to eliminate gaps. Check out this article for more details.
Here is a complete example with HTML and CSS snippets:
Visual Animation
To animate the progress bar, consider using two pseudo-elements with a sliding effect:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: arial;
}
ol {
list-style: none;
counter-reset: counter;
position: relative;
width: 600px;
margin: 50px auto;
white-space: nowrap;
}
ol::before {
content: '';
position: absolute;
height: 8px;
background: linear-gradient(to right, #BFA15F 0, #BFA15F 40%, #A8A9AD 40%, #A8A9AD 100%);
left: 50px;
right: 50px;
top: 6px;
}
ol::after {
content: '';
position: absolute;
height: 8px;
background: #BFA15F;
left: 50px;
top: 6px;
animation: stretch 2s linear infinite;
}
ol li {
counter-increment: counter;
display: inline-block;
position: relative;
text-transform: uppercase;
font-size: 0.7em;
padding-top: 30px;
width: 100px;
text-align: center;
}
ol li::before {
content: counter(counter, decimal);
position: absolute;
background: #A8A9AD;
top: 0;
left: 50%;
margin-left: -10px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
color: #FFF;
font-weight: bold;
z-index: 1;
}
ol li.complete::before {
background: #BFA15F;
}
@keyframes stretch {
0% {
width: 0;
}
100% {
width: calc(100% - 100px);
}
}
<ol>
<li class="complete">Personal</li><li class="complete">Profile</li><li>Experience</li><li>Setting</li><li>Certificate</li><li>Submit</li>
</ol>