something

src/app/progress-stepper/progress-stepper.component.html

@@ -1,6 +1,6 @@
 <div class="step-progress">
     <div class="container" #container>
-        @for (item of [{status: 'completed'}, {status: 'in progress'}, {status: 'Offen'}]; track item; let i =
+        @for (item of [{status: 'completed'}, {status: 'in progress'}, test]; track item; let i =
         $index) {
         <ng-container>
             <div class="check-box" [ngClass]="{
@@ -16,8 +16,10 @@
                 </svg> -->
 
                 <svg id="checkbox" viewBox="0 0 100 100">
-                    <circle cx="50.5" cy="49" r="46" stroke="red" stroke-width="4" fill="none" />
+                    @if (selectedIndex === i) {
-                    <circle class="circle" cx="50.5" cy="49" r="40" />
+                    <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" />
                     }
@@ -42,3 +44,13 @@
         }
     </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>

src/app/progress-stepper/progress-stepper.component.scss

@@ -4,12 +4,16 @@
 
 .container {
     display: inline-flex;
+    display: flex;
+    justify-content: center;
+    width: 100%;
     padding: 30px;
+    box-sizing: border-box;
     position: relative;
 
     svg#checkbox {
-        width: 28px;
+        width: 33px;
-        height: 28px;
+        height: 33px;
         stroke: #23c274;
         stroke-width: 6;
 
@@ -31,6 +35,15 @@
                 fill 0.5s 0.3s cubic-bezier(0.45, 0, 0.55, 1);
         }
 
+        .selection-circle {
+            // stroke-dasharray: 320;
+            // stroke-dashoffset: 320;
+            stroke: rebeccapurple;
+            transition:
+                stroke-dashoffset 0.5s,
+                fill 0.5s 0.3s cubic-bezier(0.45, 0, 0.55, 1);
+        }
+
         .check {
             stroke-dasharray: 70;
             stroke-dashoffset: 70;
@@ -43,6 +56,7 @@
 
 .check-box {
     display: flex;
+    flex-grow: 1;
     align-items: center;
     position: relative;
 
@@ -89,6 +103,7 @@
 
 .progress-line {
     width: 140px;
+    flex-grow: 1;
     margin: 0 10px;
     height: 4px;
     overflow: hidden;

src/app/progress-stepper/progress-stepper.component.ts

@@ -8,5 +8,7 @@ import { Component } from '@angular/core';
   styleUrl: './progress-stepper.component.scss'
 })
 export class ProgressStepperComponent {
+  selectedIndex = 0;
 
+  test = { status: 'Offen' };
 }