この読み込みアニメーションの作成方法は？

Question

上記の画像に基づいて、Webアプリケーションの読み込みページを作成する作業があります。アニメーションは、基本的に、時計回りと反時計回りの両方で、左側から右側に円が塗りつぶされていますが、そのようなアニメーションをどのように行うかわかりません。 =/

誰かが私にこのようにする方法を教えてもらえますか？それは、キャンバス（私はライブラリRaphael.jsを使用します）、CSS（CSS3アニメーション）、またはちょうど画像（その後、JavaScriptでアニメーション）を使用している可能性があります。

Answer 1

キャンバス要素とある種のベジエ曲線アニメーションを使用しても構いませんが、画像で行うこともできます（確かに簡単です）。大きなスプライトのPNGフレームでこれを簡単に処理でき、それほど大きな画像ではありません。上部と下部がお互いに鏡をしているので、上部だけの画像を作ってから、要素を複製して（CSS変換で）反転して、下半分にすることもできます。