CSS3/Canvas - 加载器/微调器/预加载器

Question

我想做一个像这样的 CSS3（首选）或画布微调器 http://jsfiddle.net/webtiki/Mwjn9/

但是当浅绿色圆圈完成后，我希望圆圈填充深绿色（与填充浅绿色的方式相同），而不是重新开始，然后重新开始。

基本上，圆从颜色 A 开始，用颜色 B 填充，用颜色 A 填充，然后重新开始。

我怎样才能做到这一点？

我尝试以不同的方式编辑这部分，但无法实现。

@-webkit-keyframes spin1 {
    0%   { -webkit-transform:rotate(0deg); }
    50%  { -webkit-transform:rotate(180deg); }
    100% { -webkit-transform:rotate(180deg); }
}
@keyframes spin1 {
    0%   { transform:rotate(0deg); }
    50%  { transform:rotate(180deg); }
    100% { transform:rotate(180deg); }
}
@-webkit-keyframes spin2 {
    0%   { -webkit-transform:rotate(0deg);opacity:0; }
    49.99%   { opacity:0; }
    50%  { -webkit-transform:rotate(0deg);opacity:1; }
    100% { -webkit-transform:rotate(180deg);opacity:1; }
}
@keyframes spin2 {
    0%   { transform:rotate(0deg);opacity:0; }
    49.99%   { opacity:0; }
    50%  { transform:rotate(0deg);opacity:1; }
    100% { transform:rotate(180deg);opacity:1; }
}

Answer 1

我设法用画布做到了，使用两条弧线

ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, false);
ctx.lineWidth = 15;
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath();

并为它们制作动画 http://jsfiddle.net/Rayjax/0ah48htn/1/

如果有人提出 CSS3 解决方案（画布在手机上速度很慢），我很乐意接受