CSS或jQuery/JavaScript椭圆形/圆形方形进度条

Question

我已经搜索了相当一段时间的示例，但任何人都可以提出任何步骤或实现以下进度条的最佳方式here？

它基本上是一条方形路径，圆角边缘从红色区域（进度条为红色）逆时针方向移动。我已经看到了一些径向的CSS/jQuery示例，但它们相似但不适合形状的目的。中心空间将有一个百分比面积。

任何建议从哪里开始这将不胜感激。

亲切的问候，

Answer 1

我意识到，我可以使用HTML画布来实现这一目标，我只需要制作动画。