这个效果怎么做？？

Question

没什么头绪啊。。求大神点拨 要求 兼容ie8 以上

PS：点击图片可查看完整效果

Answer 1

要兼容ie8，那就用js的动画来做，解法也比较多，常规的可以设置颜色条容器的宽度来实现。

Answer 2

js + css3 进度条动画
百度一下有很多这种教程了 关键词是 css3 动画 进度条

Answer 3

JS控制吧
毕竟css3不支持ie8

Answer 4

后面的灰的可以用一个背景，然后红色的切成每段当做背景（左 中），以用js控制div的宽度

或者后面灰色的条单独，灰色的圆单独；红色圆单独，红色条单独；

Answer 5

灰色的进度条切下做为背景，橙色部分也切下100%情况下的长度。在布局的时候，灰色条作为背景，橙色盖在灰色的上面，然后用JS控制橙色的宽度变化就可以了，再设定一下js动画的完成时间，进度条的展开速度就随你控制了。
毕竟要兼容IE8,就只能用JS做了。
望采纳。