added progress stepper
This commit is contained in:
parent
f5db1a8b23
commit
3f697f48f0
@ -1,3 +1,5 @@
|
||||
<app-progress-stepper></app-progress-stepper>
|
||||
|
||||
<div>
|
||||
Textbox:
|
||||
<div>
|
||||
|
@ -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'
|
||||
})
|
||||
|
44
src/app/progress-stepper/progress-stepper.component.html
Normal file
44
src/app/progress-stepper/progress-stepper.component.html
Normal 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>
|
138
src/app/progress-stepper/progress-stepper.component.scss
Normal file
138
src/app/progress-stepper/progress-stepper.component.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
23
src/app/progress-stepper/progress-stepper.component.spec.ts
Normal file
23
src/app/progress-stepper/progress-stepper.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
12
src/app/progress-stepper/progress-stepper.component.ts
Normal file
12
src/app/progress-stepper/progress-stepper.component.ts
Normal 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 {
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user