Registration Process Bar CSS3 animation - html

Question

What is a good way to implement this feature?
<div class="container">
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:50%">
<span class="sr-only">70% Complete</span>
</div>
</div>
</div>
Should I add those numbers on the progress-bar as photos?
or I should draw the circle by CSS3? If so, could anyone provide an example?

Answer 1

Below is a quick live demo of how one could start creating this type of visual in CSS. This example is quick and dirty, so to adapt it for production I would recommend simplifying some of the CSS and possibly generating the HTML using JavaScript and maybe some CSS pseudoelements. Then I would look into animating the colors using CSS animations. This is just to give you an idea of how it could be done, and maybe spark some ideas.
Screenshot of the result:
Live Demo:
html, body {
background-color: #555048;
}
.segment {
position: relative;
display: inline-block;
margin-right: -10px;
}
.circle {
display: inline-block;
background-color: #A8A9AD;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
color: white;
overflow: hidden;
text-align: center;
font-size: 12px;
}
.line {
display: inline-block;
width: 80px;
height: 10px;
margin: 5px 0;
background-color: #A8A9AD;
position: relative;
left: -5px;
}
.label {
position: absolute;
left: 10px;
top: 35px;
transform: translate(-50%, 0);
font-size: 12px;
color: #A8A9AD;
}
.container {
margin: 50px;
}
.segment.active .circle, .segment.active .line {
background-color: #C0A05F;
}
.segment.active .label {
color: #C0A05F;
}
<div class="container">
<div class="segment active"><div class="circle">1</div><div class="label">PERSONAL</div><div class="line"></div></div>
<div class="segment active"><div class="circle">2</div><div class="label">PROFILE</div><div class="line"></div></div>
<div class="segment"><div class="circle">3</div><div class="label">EXPERIENCE</div><div class="line"></div></div>
<div class="segment"><div class="circle">4</div><div class="label">SETTING</div><div class="line"></div></div>
<div class="segment"><div class="circle">5</div><div class="label">CERTIFICATE</div><div class="line"></div></div>
<div class="segment"><div class="circle">6</div><div class="label">SUBMIT</div></div>
</div>
JSFiddle Version: https://jsfiddle.net/8hxqunLx/1/

Answer 2

Let's create something clean and beautiful!
The end result:
The HTML
This is a good place for an ordered list. All we need is this:
<ol>
<li class="complete">Personal</li>
<li class="complete">Profile</li>
<li>Experience</li>
<li>Setting</li>
<li>Certificate</li>
<li>Submit</li>
</ol>
When a step is complete, give it the complete class to change the steps background colour.
The CSS
The numbers
There is an in-depth write up of counter over on Smashing Magazine.
The numbers are created with a counter which looks like this stripped to the basics:
ol {
list-style: none;
counter-reset: counter;
}
ol li {
counter-increment: counter;
}
ol li::before {
content: counter(counter, decimal);
}
The counter-increment property provides the correct number which is placed inside with content in a ::before pseudo-element.
The numbers are then positioned above the text with position: absolute.
The progress bar
Read more about pseudo-elements over here on the MDN.
It looks like this and goes behind the numbers:
It is created with a ::before pseudo element with a background gradient. Change the two middle percentage values (at 40% in this example) as the form is completed:
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;
}
Style the numbers
The numbers are inserted with ol li::before, which can be styled further:
border-radius: 50% to create a circle
text-align: center and line-height: 20px to perfectly center in the circle
a background colour which is changed as the steps are completed.
Complete Example
Note: There is no whitespace between the closing </li> tag and the next opening <li>. This prevents a gap between the inline-block list items. Read more here.
* {
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;
/*white-space: nowrap; means -- don't wrap the text*/
}
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 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;
/*Matches height value*/
text-align: center;
border-radius: 50%;
color: #FFF;
font-weight: bold;
}
ol li.complete::before {
background: #BFA15F;
}
<ol>
<li class="complete">Personal</li><li class="complete">Profile</li><li>Experience</li><li>Setting</li><li>Certificate</li><li>Submit</li>
</ol>
Animated example
If the progress bar should animate, you could create it with two pseudo elements, instead of the gradient, with the gold line sliding over the gray.
* {
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;
/*white-space: nowrap; means -- don't wrap the text*/
}
ol::before {
content: '';
position: absolute;
height: 8px;
background: #A8A9AD;
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;
/*Matches height value*/
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>