在HTML + CSS中不确定进度条

Question

我想创建一个不确定的HTML + CSS进度条,所以它看起来像Vista上的那个:

Vista不确定进度条http://i.msdn.microsoft.com/dynimg/IC121865.png

我想要:

1. 水平调整它以进度条宽度(可定义最小和最大宽度)
2. 不要使用Javascript,而只是动画GIF
3. 在整个宽度上只有一个移动指示器

有什么建议怎么做？

Answer 1

不不不!有可能的

使用CSS overflow: hidden和keyframe,也可以是可能的.

对于关键帧,我使用left:-120px(发光物体的宽度)来left:100%

我使用的结构:

<div class="loader">
<div class="loader-bg left"></div>
<div class="loader-bg right"></div>
<div class="greenlight"></div>
<div class="gloss"></div>
<div class="glow"></div>
</div>

更新,紧凑的结构使用:before和:after:

<div class="loader7">
    <span></span>
    <div class="greenlight"></div>
</div>

渐变,遮蔽,发光和所有效果都需要昂贵的结构.如果有人有更好的想法,请告诉我.

在这个日期,仅限webkit解决方案(发光的椭圆掩模):

为Firefox和其他不支持的浏览器添加了SVG掩码-webkit-mask-image: http ://jsfiddle.net/danvim/8M24k/