Angular custom stepper

Question

I have the following stepper :

I would like to add a color progress bar between the steps I want the bar comence before the steper with a width of 80px Then when step 1 is finished, have a bar between step 1 and 2 And if I am on step 3 (last step). Have a bar between 2 and 3 and also after 3 of 80 wide The bar should be between round and centered

<div class="stepper-progress" [ngClass]="classStepperProgressWidth">
<ng-container *ngFor="let step of steps; let i = index">
    <div class="step-information">
        {{step.label}}
        <div class="stepper-container">
            <div class="step-content step-active" *ngIf="i === selectedIndex; else noCurrentStep">
                {{i + 1}}
            </div>
    
            <ng-template #noCurrentStep>
                <div class="step-content step-complet" *ngIf="i < selectedIndex; else nextStep">
                    {{i + 1}}
                </div>
    
                <ng-template #nextStep>
                    <div class="step-content step-default">
                        {{i + 1}}
                    </div>
                </ng-template>
            </ng-template>
        </div>
    </div>
</ng-container>
</div>

<ng-container *ngIf="selected" [ngTemplateOutlet]="selected.content"></ng-container>

.stepper-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    height: 80px;
}


.stepper-container {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
}

.step-content{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.step-default {
    width: 32px;
    height: 32px;
    padding: 9px 11px 11px;
    border: 4px solid #f5f6fa;
    box-shadow: inset 0px 0px 0px 1px $grey-80;
    box-sizing: border-box;
    background-color: #f5f6fa;
    border-radius: 48px;
    font-family: 'Century Gothic', sans-serif;
    font-size: 17px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.41;
    letter-spacing: normal;
    text-align: center;
    color: $grey-80;
}

.step-active{
    width: 40px;
    height: 40px;
    margin: 0px;
    padding: 13px 15px 15px;
    border-radius: 48px;
    background-color: $secondary-green;
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: $blue-primary;
}

.step-complet{
    width: 40px;
    height: 40px;
    margin: 0px;
    padding: 13px 15px 15px;
    border-radius: 48px;
    background-color: $blue-primary;
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: $white;
}

.step-information{
    display: flex;
    flex-direction: column;
    align-items: center;
}