44 lines
1.9 KiB
HTML
44 lines
1.9 KiB
HTML
|
<div class="step-progress">
|
||
|
|
<div class="container" #container>
|
||
|
|
@for (item of [{status: 'completed'}, {status: 'in progress'}, {status: 'Offen'}]; 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">
|
||
|
|
<circle cx="50.5" cy="49" r="46" stroke="red" stroke-width="4" fill="none" />
|
||
|
|
<circle class="circle" cx="50.5" cy="49" r="40" />
|
||
|
|
@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>
|