HTML+CSS 中的不确定进度条

Question

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

_{（来源：microsoft.com）}

我会喜欢：

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>

< s>

使用 :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 - width:100%
2. 没有 Javascript 意味着你必须使用 html5 来实现，这有点棘手。 动画 GIF 才会起作用
3. 仅当您决定将栏设置为固定宽度（否则 gif 将会倾斜）以移动它时，

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

Answer 3

仅 GIF 的解决方案

Vista 的不确定进度条在右侧消失后不会立即循环...
所以我可以创建一个足够宽的 GIF 图像，当进度条变窄时，它需要更长的时间来循环，当它变宽时，它会再次循环。 :)

在两种情况下，每次重复的时间是相同的，但在窄条中，到达终点所需的时间比在宽条中要少。