进度条

进度条 100
进度条 47
进度条 0
需要实现如图所示的进度条，其平均分成四个阶段：

• 阶段1：0～25
• 阶段2：25～50
• 阶段3：50～75
• 阶段4：75~100

要求

• 显示每个阶段标题
• 不同阶段不同的背景颜色，不同的形状

思路

1. 分成两个大的div，一个div显示文案，另一个div显示进度
2. 组合两个div，将两个div重叠

实现

1. 显示文案

• html

<div className='process-text'>
    <div className='process-text--step'>阶段1</div>
    <div className='process-text--step'>阶段2</div>
    <div className='process-text--step'>阶段3</div>
    <div className='process-text--step'>阶段4</div>
</div>

• css

.process-text {
    display: flex;

    &--step {
        width: 25%;
        height: 20px;
        border-radius: 100px 0 0 100px;
        position: relative;
        text-align: center;
        font-size: 11px;
        color: #4676aa;
        white-space: nowrap;
    }
}

• 实现效果

  
  

2. 显示进度

• html

<div className='process-show'>
    <div className={`process__text--step ${this.barLen>= 1 ? 'full' : ''}`}
        style={{ width: this.barLen == 1 ? `calc(${data} / 25 * (25% - 20px))` : '' }}></div>
    <div className={`process__text--step ${this.barLen>= 2 ? 'full' : ''}`}
        style={{ width: this.barLen == 2 ? `calc(${data - 25} / 25 * (25% - 30px))` : '' }} ></div>
    <div className={`process__text--step ${this.barLen>= 3 ? 'full' : ''}`}
        style={{ width: this.barLen == 3 ? `calc(${data - 25 * 2} / 25 * (25% - 30px))` : '' }}></div>
    <div className={`process__text--step ${this.barLen>= 4 ? 'full' : ''}`}
        style={{ width: this.barLen == 4 ? `calc(${data - 25 * 3} / 25 * (25% - 38px))` : '' }}></div>
</div>

this.barLen是用来判断其处于那一阶段，取值方式：this.barLen=Math.ceil(data/25)

• css

.full {
    &::after {
        position: absolute;
        right: -20px;
        top: 0;
        content: "";
        border: 10px solid #cbe6ff;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-top: 10px solid transparent;
    }

    &:nth-child(1) {
        background: #cbe6ff;
    }

    &:nth-child(2) {
        background: #96ccff;
        left: 20px;

        &::before {
            border: 10px solid #96ccff;
        }

        &::after {
            border-color: #96ccff;
        }
    }

    // ...
    // 省略阶段3和阶段4的样式实现，和阶段1、2样式实现类似
}

实现效果（目前进度为47）

整合process-text和process-show

.process {
    position: releative;

    &-text {
        position: absolute;
        z-index: 1;
    }

    &-show {
        position: absolute;
    }
}

最终效果

最终效果

总结

• 运用伪类::before和::after实现箭头形状
• 运用z-index实现层叠效果