CSS或jQuery/JavaScript橢圓形/圓形方形進度條

Question

我已經搜索了相當一段時間的示例，但任何人都可以提出任何步驟或實現以下進度條的最佳方式here？

它基本上是一條方形路徑，圓角邊緣從紅色區域（進度條爲紅色）逆時針方向移動。我已經看到了一些徑向的CSS/jQuery示例，但它們相似但不適合形狀的目的。中心空間將有一個百分比面積。

任何建議從哪裏開始這將不勝感激。

親切的問候，

Answer 1

我意識到，我可以使用HTML畫布來實現這一目標，我只需要製作動畫。