added progress stepper

This commit is contained in:
Hlars 2025-03-11 21:18:55 +01:00
parent f5db1a8b23
commit 3f697f48f0
6 changed files with 221 additions and 1 deletions

View File

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

View File

@ -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'
})

View File

@ -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>

View File

@ -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;
}
}
}

View File

@ -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();
});
});

View File

@ -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 {
}