HTML、CSS、またはJavaScriptを使用したアニメーション円形カウントダウンタイマー

Question

四半期に分割された円を作成し、各四半期をセグメントに細分します。各四半期には異なる背景色（または背景画像）があります。

サークルはカウントダウンタイマーとして機能し、各セグメントは約5秒間持続します（探しているもののアイデアについては添付の画像を参照）。タイマーは、javascriptコマンドが発行されたときにのみ開始されます（タイマーを一時停止および巻き戻すことも可能でなければなりません）。

セグメント間の遷移はスムーズなアニメーションである必要はない（すなわち、セグメントへの移行は、単に白旋回前のセグメントの背景色を含むことができる）

いくつかの注意点があります
は - 各セグメントのサイズは柔軟でなければならないので、各象限内のセグメントの数は、を変更することができ
-（すなわちinsteaを変更することができる象限の順私たちはオレンジ、赤、紫などを持つことができます）
- iPhoneと既存のAndroid携帯電話で動作する必要があります（私はRaphaelとSVGを見ていましたが、 Androidでサポートされていないようです）

私はこの問題にどのように最善を尽くすかについて紛失していますので、提案を聞いたり、例を見ることに感謝します（ただし、任意）

Answer 1

キャンバス要素を使用して、javascriptを使用して描画するか、静止画像とアニメーション画像を使用して2つのタイプを切り替えることをお勧めします。

Answer 2

Raphaël JSを見ましたか？実際にはグラフに合わせています。私は具体的なことを本当に確信していませんが、これはあなたを始めなければなりません。