angular-comment-mentions/src/app/progress-stepper/progress-stepper.component.html

<div class="step-progress">
    <div class="container" #container>
        @for (item of [{status: 'completed'}, {status: 'in progress'}, test]; track item; let i =
        $index) {
        <ng-container>
            <div class="check-box" [ngClass]="{
            complete: item.status === 'completed',
            active: item.status === 'in progress'
          }">
                <!-- <svg id="checkbox" viewBox="0 0 100 100">
                    <circle class="circle" cx="50.5" cy="49" r="45" />
                    @if (item.status == 'in progress') {
                    <circle class="inner-circle" cx="50.5" cy="49" r="17" />
                    }
                    <polyline class="check" points="28.5,51.9 41.9,65.3 72.5,32.8 " />
                </svg> -->

                <svg id="checkbox" viewBox="0 0 100 100">
                    @if (selectedIndex === i) {
                    <circle class="selection-circle" cx="50.5" cy="49" r="40" stroke-width="8" fill="none" />
                    }
                    <circle class="circle" cx="50.5" cy="49" r="34" />
                    @if (item.status == 'in progress') {
                    <circle class="inner-circle" cx="50.5" cy="49" r="17" />
                    }
                    <polyline class="check" points="28.5,51.9 41.9,65.3 72.5,32.8 " />
                </svg>

                <div [ngClass]="{
              complete: item.status === 'completed',
              active: item.status === 'in progress'
            }" class="progress-line">
                    <div class="progress-percent"></div>
                </div>
                <div class="info">
                    <span class="step">step {{ i + 1 }}</span>
                    <span class="progress-info" [ngClass]="{
                'completed': item.status === 'completed',
                'in-progress': item.status === 'in progress'
              }">{{ item.status }}</span>
                </div>
            </div>
        </ng-container>
        }
    </div>
</div>


<div (click)="selectedIndex =  selectedIndex + 1">next</div>
<div (click)="selectedIndex =  selectedIndex - 1">prev</div>

<div>
    <button (click)="test.status = 'open'">open</button>
    <button (click)="test.status = 'in progress'">progress</button>
    <button (click)="test.status = 'completed'">complete</button>
</div>