56 lines
2.3 KiB
HTML
56 lines
2.3 KiB
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> |