如何制作这个加载动画？答案

【问题标题】：How to make this loading animation?如何制作这个加载动画？
【发布时间】：2012-01-08 01:35:48
【问题描述】：

根据上图，我得到了为 webapp 制作加载页面的任务。动画基本上是从左侧到右侧填充的圆圈，无论是顺时针还是逆时针，但我不知道如何做这样的动画。 =/

有人可以告诉我如何做到这一点吗？它可能使用画布（我将使用库 Raphael.js）、CSS（CSS3 动画），甚至只是图像（然后使用 javascript 制作动画）。

【问题讨论】：

【解决方案1】：

您可以使用画布元素和某种贝塞尔曲线动画来实现，但也可以使用图像来实现（当然更简单）。一个大的PNG帧精灵可以很容易地处理这个问题，而且它不会是那么大的图像。更好的是，由于顶部和底部相互镜像，您可以只为顶部制作图像，然后复制元素并翻转它（使用 CSS 转换）以制作下半部分。

【讨论】：