emmmmm 吃饭前等人，就简单实现了一个，但是不知道兼容性咋样。。主要用的就是 css3 的 clip 属性

div {

width: 400px;

height: 40px;

line-height: 40px;

text-align: center;

}

.progress-container {

position: relative;

border: 1px solid black;

font-size: 28px;

}

.skyblue {

position: absolute;

top: 0;

z-index: 1;

background: skyblue;

color: white;

}

.white {

position: absolute;

top: 0;

z-index: 2;

background: white;

color: skyblue;

clip: rect(auto auto auto 194px);

}

原理大概这样：

包裹的容器里有两个初始定位一样的 div

底下的 div 长这样：

上面的 div 长这样：

之后根据进度用 js 来调整 clip: rect(top, right, bottom, left) 中的属性值就行了，这个例子里调整的是 left 值