CSS3：圆线预紧器？

我试图在不使用SVG的情况下实现类似的功能：

这可能吗？如果可能的话，请有人就此提出建议

带有SVG的CSS如下所示：

@import "compass/css3";

$radius: 100px; //also set the attribute in html
$stroke-width: 10px; //also set the attribute in html
$circle-stroke-color: red;
$circle-fill-color: #3ab54a;
$animation-duration: 60s;

.circle {
  @include animation(load $animation-duration ease-in-out);
  @include transform(rotate(-90deg));
  @include transform-origin($radius + $stroke-width);
  fill: $circle-fill-color;
  stroke: $circle-stroke-color;
  stroke-dasharray: ($radius * 2) * pi(); //C = πd
}

@include keyframes(load) {
  from {
    stroke-dashoffset: ($radius * 2) * pi(); //C = πd
  }
  to {
    stroke-dashoffset: 0;
  }
}

---

我发现了一个有趣的。通过应用

边界半径：100%，它有效地创建了一个圆形元素

然后，它为
边框顶部应用不同的颜色，以便仅高亮显示边框的四分之一。然后使用示例中所示的关键帧动画旋转整个元素

您可以举个例子，添加一个
背景色
，使用边框颜色并创建所需内容
填充背景只会在div不是圆形的情况下起作用（我认为）。这样地：