Javascript中的循环进度指示器

Question

我有一个简单的旋转木马来显示一些图像。正如您所期望的那样，旋转木马每隔x秒旋转一次。

我目前有一个div，我在x秒内设置宽度动画以显示进度。这允许用户查看他们必须等待多长时间才能显示下一个图像。当用户将鼠标悬停在图像上时，进度条会缩小。当它们鼠标移出时，它会再次开始填充。

然而，我不想使用无聊的酒吧，而是想尝试使用一个圆圈。有点像ajax加载时看到的旋转圆圈。我不知道该怎么做。

有人可以帮忙吗？它甚至可能吗？

Answer 1

生成一系列代表您想要表达的不同程度的图像，使您可以根据自己的喜好进行细化。您可以制作代表0％，25％，75％和100％“进度”的四个图像或代表每个1％差异的一百个图像。

在JavaScript中，您可以在适当的图像中交换当前进度量，而不是更改条形图的宽度。 if (progress < 25) image = '0percent.png';（等等）。

在一些支持HTML 5的现代浏览器上可以不使用图像进行此操作，但在其他地方完全不切实际。

请注意，这与标准的“加载”图形完全不同。那些微调器根本不代表进度，因为它们只是反复旋转直到文档加载。因此，旋转器被制作为动画GIF，因此单个图像可以简单地坐在页面上，快乐地旋转，直到它被移除。

Answer 2

为了避免进度指示器的每一步的 n gifs / png的混乱，创建所有步骤的单个精灵并水平或垂直堆叠（例如，如果您的进度指示器是40x40并且你想显示8个步骤，创建一个320x40的图像，然后通过从左到右背靠背增加值来放置它们。

创建一个新元素，其尺寸固定为单个步骤的大小（在示例中为40x40），并将此精灵作为其背景图像。

然后，当您收到来自计时器（或setTimeout/Interval）的刻度时，将背景图像的position-x属性移动一个尺寸（0,40,80,120等）。

这比为每一步都有一个单独的图像要快得多，最终用户会立即在第一个事件上预加载整个精灵。

Answer 3

您可以使用SVG或画布。

还有libraries可以做到（例如this？）

Answer 4

你激励我制作一个手动控制的进度指示器。我做了demo of it here。然后我开始tweeking并决定把它变成一个插件。该插件包括一个计时器以及一些其他选项。查看plugin demo，也许这对你有用吗？