HTML步骤进度条组件实现

效果图

思路

1. 分份：

有多少个步骤就可以分成多少分，每份宽度应该为100%除以步骤数，故以上效果图中的每份宽度应该为25%，每份用一个div。

2. 每份：

每份中可以看成是三个元素，一个使用span显示序号，一个使用div显示进度线，最后一个使用span显示文字，三者皆水平居中（或者本质上显示进度线的宽度为100%不需要居中，文本使用文本居中即可，序号div让其父div使用弹性居中布局），显示序号的写在显示进度线的后面（确保图层更高，序号不被覆盖），显示序号的和显示进度线的重合在同一行（显示序号使用absolute定位，弹性居中布局），显示文字的另起新行。

3. 两边：

以上内容完成后分别在序号1和序号4的左边和右边会有多出来的背景，可以使用渐变效果，让其中一半显示显示背景色，另一半显示透明色即可。

4. 已完成进度效果：

更改背景色即可，但要注意两边的效果

代码

 
 
1
选场
2
选座
3
付款
4
观影
 
 

使用

1. 更改分段数量：

改step中的宽占比和下面第n部分的数量即可

2. 更改完成分段：

在step-progress中加入done即可

参考资料

1. 【CSS3实现背景色一半红一半白】https://blog.csdn.net/qq_40951289/article/details/106928900

2. 【Steps步骤条, Bootstrap风格步骤条】https://www.cnblogs.com/romayn/p/9036174.html