Javascript 如何制作这个加载动画？

根据上面的图片，我得到了制作一个webapp加载页面的任务。动画基本上是从左侧到右侧填充的圆，以顺时针和逆时针的方式填充，但我不知道如何制作这样的动画=/

---

有人能告诉我怎么做吗？它可能使用canvas（我将使用Raphael.js库）、CSS（CSS3动画），甚至只是图像（然后使用javascript进行动画制作）。

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

您能否详细说明如何填充它？黄色的顺时针/逆时针扩散是从一条中心线开始并以某种方式扩散，还是颜色只是从左侧开始逐渐扩散？@圆圈首先显示为灰色，然后根据百分比，黄色层将从左侧出现，顺时针和逆时针消耗圆圈（您可以按照箭头查看黄色图层的演变）。