body {
background-image: linear-gradient(-120deg, #26e289 0%, #1a5fa2 100%, #ff0000 200%);
background-position: 0 0;
background-size: 300%;
}
.progressbar {
counter-reset: step;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
font-weight: 500;
max-width: 1000px;
width: 100%;
margin: 50px auto 20px auto;
display: flex;
flex-flow: row wrap;
}
.progressbar li {
position: relative;
list-style: none;
width: 25%;
text-align: center;
font-size: 20px;
}
/* Circles */
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 40px;
height: 40px;
border: 1px solid #2979FF;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: #FF9100;
line-height: 39px;
font-size: 18px;
position: relative;
z-index: 2;
}
.progressbar li:after {
content: "" !important;
position: absolute;
width: 100%;
height: 1px;
background: orange;
top: 20px;
left: -50%;
z-index: 1;
}
.progressbar li:first-child:after {
content: none !important;
}
.progressbar li.active:before {
background: #fff;
content: "✔";
color: #132549;
font-size: 22px;
}
.progressbar li.active + li:after {
background: #ffffff !important;
}