circular progress bar for 4 steps of form

Question

Looked for circular progress to indicate on which step the user is out of 4.

Like 1st form out of 4, 2nd form out of 4, 3rd form out of 4, 4th form out of 4

Below are screen shot of what is expected.

I got few example which had two div inside it. CSS Progress Circle

Which I though was complex in my case where I just need 4 steps.

Answer 1

Here is my solution which just used border and sudo elements before and after

Which is very simple.

NOTE: This can only used in case of 4 steps.

.count {
     position: relative;
     width: 40px;
     height: 40px;
     margin-right: 10px;
     display: inline-block;
     border: 1px solid #ffc107;
     border-radius: 50%;
     font-family: Arial;
     color: #888;
}
 .count span {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
}
 .count:after {
     position: absolute;
     content: "";
     background: #fff;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     left: 5px;
     top: 5px;
}
 .count:before {
     position: absolute;
     content: "";
     border: 20px solid #ffc107;
     border-radius: 50%;
     height: 0;
     width: 0;
     transform: rotate(45deg);
}
 .count.step1:before {
     border-left-color: transparent;
     border-bottom-color: transparent;
     border-right-color: transparent;
}
 .count.step2:before {
     border-left-color: transparent;
     border-bottom-color: transparent;
}
 .count.step3:before {
     border-left-color: transparent;
}
 

<div class="count step1">
  <span>1</span>
</div>
<div class="count step2">
  <span>2</span>
</div>
<div class="count step3">
  <span>3</span>
</div>
<div class="count">
  <span>4</span>
</div>