Javascript 自定义图像进度条（~圆圈）

我被困在这里了。我想把它做成一个进度条，但我不知道我该怎么做。（从A=>B）

谢谢你的帮助

---

我找到了这样的解决方案！ 我希望这有帮助

函数饼图（perc）{
var-rightPie=180；
var leftPie=360；
var-rightDeg=null；
var-leftDeg=null；
//180==50×perc？
变量x=180*perc/50；
var newPerc=x；
如果（newPerc<180）{
rightDeg=rightPie+newPerc；
}
否则如果（newPerc=180）{
右度=360；
leftDeg=newPerc-180；
}
如果（rightDeg！=null）{
$（'body'）.prepend（'.right pie.char:before{moz transform:rotate（'+rightDeg+'deg）；-ms transform:rotate（'+rightDeg+'deg）；-webkit transform:rotate（'+rightDeg+'deg）；-o-transform:rotate（'+rightDeg+'deg）；）；
}
如果（leftDeg！=null）{
$（'body'）.prepend（'.left pie.char:before{moz transform:rotate（'+leftDeg+'deg）；-ms transform:rotate（'+leftDeg+'deg）；-webkit transform:rotate（'+leftDeg+'deg）；-o-transform:rotate（'+leftDeg+'deg）；）；
}
//$（'.log'）.prepend（newPerc+'-'+leftDeg+'-'+rightedg）；
} 
//摆馅饼
派（26）
.genholder{
宽度：500px；
高度：500px；
位置：相对位置；
}
.好的{
宽度：250px；
高度：500px；
背景：url(http://crf.ngo/view/img/orphan-s-right.png)左中无重复；
背景尺寸：200px 400px；
位置：绝对位置；
右：0px；
顶部：0px；
内容：“；
z指数：15；
溢出：隐藏；
}
.好的，派，炭{
位置：相对位置；
宽度：500px；
高度：500px；
-moz变换原点：左中心；
-ms变换原点：左中心；
-o变换原点：左中心；
-webkit变换原点：左中心；
变换原点：左中心；
左：0px；
}
恰尔：在你之前{
内容：''；
位置：绝对位置；
宽度：250px；
高度：500px；
边界半径：250px 0 0 250px；
背景：#fff；
-moz变换原点：右中心；
-ms变换原点：右中心；
-o-变换原点：右中心；
-webkit变换原点：右中心；
变换原点：右中心；
左：-250px；
z指数：20；
}
.左派{
宽度：250px；
高度：500px；
背景：url(http://crf.ngo/view/img/orphan-s-left.png)右中无重复；
背景尺寸：200px 400px；
位置：绝对位置；
左：0px；
顶部：0px；
内容：“；
z指数：45；
溢出：隐藏；
}
.左派.半焦{
位置：相对位置；
宽度：500px；
高度：500px；
-moz变换原点：左中心；
-ms变换原点：左中心；
-o变换原点：左中心；
-webkit变换原点：左中心；
变换原点：左中心；
左：0px；
}
.左派{
内容：''；
位置：绝对位置；
宽度：250px；
高度：500px；
边界半径：250px 0 0 250px；
背景：#fff；
-moz变换原点：右中心；
-ms变换原点：右中心；
-o-变换原点：右中心；
-webkit变换原点：右中心；
变换原点：右中心；
左：0px；
z指数：20；
}
.图像支架{
浮动：左；
宽度：350px；
高度：350px；
文本对齐：居中；
-webkit掩码图像：url(http://crf.ngo/view/img/orphan-mask-1.png);
掩码图像：url(http://crf.ngo/view/img/orphan-mask-1.png);
背景尺寸：封面；
背景位置：中心；
左边距：75px；
边缘顶部：75px；
位置：相对位置；
z指数：50；
}

发布您迄今为止尝试过的代码，我什么都没试过。只是我现在不知道怎么做。我应该使用什么样的逻辑？先发布你现在正在做的事情，而不使用进度条。