SCSS Circular Progress Incidator Issue - html

Question

I am trying to add an extra stage to a 4-step CSS progress indicator and make it a 5-step progress indicator. The existing code is shown below. How can I modify the code to achieve this?
.myact__progress-indicator {
position:relative;
width:34px;
height:34px;
border-radius:50%;
border:2px solid $twe-grey-lightest;
}
.myact__progress-indicator-progress {
position:absolute;
width:34px;
height:34px;
border-radius:17px;
clip:rect(0px, 34px, 34px, 17px);
margin:-2px;
&:before {
position:absolute;
display:block;
content:'';
width:34px;
height:34px;
background-color:$twe-green;
border-radius:17px;
clip:rect(0px, 17px, 34px, 0px);
transform:rotate(0deg);
}
&:after {
position:absolute;
display:block;
content:'';
width:34px;
height:34px;
background-color:$twe-green;
border-radius:17px;
clip:rect(17px, 34px, 34px, 17px);
transform:rotate(90deg);
}
&.p1 {
&:before {
transform:rotate(72deg);
}
}
&.p2 {
&:before {
transform:rotate(144deg);
}
}
&.p3 {
clip:rect(0px, 34px, 34px, 0px);
&:before {
transform:rotate(144deg);
}
&:after {
transform:rotate(90deg);
}
}
&.p4 {
clip:rect(0px, 34px, 34px, 0px);
&:before {
transform:rotate(216deg);
}
&:after {
transform:rotate(72deg);
}
}
&.p5 {
clip:rect(0px, 34px, 34px, 0px);
&:before {
clip:rect(0px, 34px, 34px, 0px);
transform:rotate(0deg);
}
&:after {
display:none;
}
}
}
HTML:
<div class="myact__progress-indicator">
<div class="myact__progress-indicator-progress p{{r.fields[6].value + 1}}"></div>
<div class="myact__progress-indicator-inner">
<span class="myact__progress-indicator-label">{{r.fields[6].value+1}}/5</span>
</div>
</div>
P1 and P2 are working as expected but it starts to fall over at P3, I tried to create a fiddle but I'm unable to replicate, I'm hoping I missed something glaringly obvious.