页面加载之后显示一个进度条

[AlexZ33]

需求

页面加载之后显示一个进度条。现在有个需求，当进度条走到大概图片中的位置的时候，里面文字的颜色变成白色。
实际不一定是图片显示的47%的位置，希望判断的是到达文本开始就变色变成白色。

思路

这个样式咋一看无从下手，经过探究可以发现可以用两层文字实现，白色的那层文字是放在蓝色进度条的容器中，当达到一定宽度后才开始展现。这个要从html结构上下手，蓝色进度条容器设置超出隐藏。

第二点就是这两层文字都要通过定位居中到这个条的中间，用绝对定位来实现。

这是不考虑用js的最好方法

https://codepen.io/AlexZ33/pen/BapaOJL

涉及具体需求，则蓝色进度条process的宽度应该是动态设置的，不过这个在框架辅助下就简单多了。