进度条 100
进度条 47
进度条 0
需要实现如图所示的进度条，其平均分成四个阶段：
- 阶段1：0～25
- 阶段2：25～50
- 阶段3：50～75
- 阶段4：75~100
要求
- 显示每个阶段标题
- 不同阶段不同的背景颜色，不同的形状
思路
- 分成两个大的div，一个div显示文案，另一个div显示进度
- 组合两个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实现层叠效果
