Html 如何实现角度2+；步骤进度条

我想在Angular2+TypeScript+SCSS+HTML中实现一个7步进度条，如上图所示。我不知道如何继续

我有7个步骤（创建、分配、进行等）和三个不同的路径（所有7个步骤，在3个步骤后被阻止，在初始步骤被拒绝）

我的想法：

画一条线，添加图标，然后在步骤完成后更改图标。我应该在这里使用路由吗

添加图像/图标，然后在两者之间添加线条

添加默认行，然后在其上添加图标/图像，并为完成的步骤上色 我是为一个网站做的，所以图标/图像下面的文字应该相应地调整大小，并且应该适用于手机大小，尽管此时不需要。角度步进器有按钮，对我来说有点复杂。我在已经存在的网站上实现状态变量的内部调用。它将被放置在网站的右上角

此外，可以灰显当前步骤的前两个步骤，并以灰色显示下一个步骤

---

我对Angular2+是一个非常陌生的人。我之前做了一些类似的事情，但最终还是把它报废了，所以它不是超干净的。我还只是写了状态的名称，并用不同的颜色给它们着色，而不是在下面有标签的图标。我的会在小屏幕上切换到垂直视图。不确定它是否会有多大帮助，但以下是html：

<div
    *ngIf="appeal && statuses && statuses.length > 0 && childVisible"
    fxLayout="row"
    fxLayoutAlign="start center"
    fxLayout.lt-md="column"
    class="py-24"
>
    <ng-container *ngFor="let status of statuses; let last = last; let index = index">
        <span [ngClass]="{ 'green-fg': index <= selection, 'orange-fg text-bold': index === selection }">{{
            status.statusDescription
        }}</span>
        <mat-divider
            fxHide.lt-md="true"
            fxHide="false"
            inset="true"
            fxFlex="1 0 15px"
            *ngIf="!last"
            class="my-0 mx-8"
        ></mat-divider>
        <mat-divider
            fxHide.lt-md="false"
            fxHide="true"
            vertical="true"
            inset="true"
            fxFlex="1 0 10px"
            *ngIf="!last"
            class="mx-0 my-4"
        ></mat-divider>
    </ng-container>
</div>

{{
status.statusDescription
}}