在HTML + CSS中不确定进度条

Question

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

Vista indeterminate progress bar 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和其他不支持-webkit-mask-image的浏览器添加了SVG掩码： http://jsfiddle.net/danvim/8M24k/

Answer 2

1. css - 宽度：100％
2. 没有Javascript意味着你必须用html5来做这个有点棘手。只有当你决定使条形固定宽度时，动画GIF才会起作用（否则gif会偏斜）
3. 移动它：javascript或html5

最简单的方法：javascript（喜欢与否......;））

Answer 3

仅限GIF的解决方案

Vista的不确定进度条在右侧关闭后不会循环播放... 所以我可以创建一个足够宽的GIF图像，当进度条变窄时，它需要更长的时间才能循环，当它变宽时它会再次循环声纳。 ：）

在两种情况下，每次重复的时间都是相同的，但在较窄的情况下，到达终点的时间要少于较宽的时间。