added progress stepper

src/app/app.component.html

@@ -1,3 +1,5 @@
+<app-progress-stepper></app-progress-stepper>
+
 <div>
   Textbox:
   <div>

src/app/app.component.ts

@@ -4,10 +4,11 @@ import { CommentBoxComponent } from "./comment-box/comment-box.component";
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ProgressStepperComponent } from "./progress-stepper/progress-stepper.component";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, CommentBoxComponent, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
+  imports: [RouterOutlet, CommentBoxComponent, MatFormFieldModule, MatInputModule, ReactiveFormsModule, ProgressStepperComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

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

@@ -0,0 +1,44 @@
+<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>

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

@@ -0,0 +1,138 @@
+.step-progress {
+    margin-bottom: 1rem;
+}
+
+.container {
+    display: inline-flex;
+    padding: 30px;
+    position: relative;
+
+    svg#checkbox {
+        width: 28px;
+        height: 28px;
+        stroke: #23c274;
+        stroke-width: 6;
+
+        .circle {
+            stroke-dasharray: 320;
+            stroke-dashoffset: 320;
+            fill: #d2d2d2;
+            transition:
+                stroke-dashoffset 0.5s,
+                fill 0.5s 0.3s cubic-bezier(0.45, 0, 0.55, 1);
+        }
+
+        .inner-circle {
+            stroke-dasharray: 320;
+            stroke-dashoffset: 320;
+            fill: #fff;
+            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;
+            stroke: #fff;
+            fill: none;
+            transition: all 0.5s 0.5s cubic-bezier(0.45, 0, 0.55, 1);
+        }
+    }
+}
+
+.check-box {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .info {
+        position: absolute;
+        bottom: -40px;
+        display: grid;
+        grid-template-columns: max-content;
+
+        span.progress-info {
+            text-transform: capitalize;
+            font-size: 11px;
+            display: inline-block;
+            margin-left: 5px;
+            padding: 2px 10px;
+            transform: translateY(6px);
+            font-weight: 500;
+            color: currentColor;
+            background: #eee;
+            border-radius: 20px;
+            transition: background-color 0.1s ease-in-out;
+        }
+
+        span.progress-info.in-progress {
+            background-color: #234dc2;
+            color: #fff;
+        }
+
+        span.progress-info.completed {
+            background-color: #23c274;
+            color: #fff;
+        }
+
+        span.step {
+            margin-left: 10px;
+            text-transform: uppercase;
+            font-weight: normal;
+            letter-spacing: 0.5px;
+            font-size: 11px;
+            color: #777;
+        }
+    }
+}
+
+.progress-line {
+    width: 140px;
+    margin: 0 10px;
+    height: 4px;
+    overflow: hidden;
+    display: inline-block;
+    background: #d2d2d2;
+    border-radius: 10px;
+
+    .progress-percent {
+        height: inherit;
+        width: 0%;
+        transition: all 0.5s 0.5s cubic-bezier(0.45, 0, 0.55, 1);
+    }
+}
+
+.progress-line.active {
+    .progress-percent {
+        background: #234dc2;
+        width: 50%;
+    }
+}
+
+.progress-line.complete {
+    .progress-percent {
+        width: 100%;
+        background: #23c274;
+    }
+}
+
+.check-box.active {
+    svg#checkbox {
+        .circle {
+            fill: #234dc2;
+        }
+    }
+}
+.check-box.complete {
+    svg#checkbox {
+        .circle {
+            stroke-dashoffset: 0;
+            fill: #23c274;
+        }
+
+        .check {
+            stroke-dashoffset: 0;
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressStepperComponent } from './progress-stepper.component';
+
+describe('ProgressStepperComponent', () => {
+  let component: ProgressStepperComponent;
+  let fixture: ComponentFixture<ProgressStepperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProgressStepperComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProgressStepperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { NgClass } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-progress-stepper',
+  imports: [NgClass],
+  templateUrl: './progress-stepper.component.html',
+  styleUrl: './progress-stepper.component.scss'
+})
+export class ProgressStepperComponent {
+
+}