Coder Wrap provides free to use snippets

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;
}