CSS3 : Circular Line preloader?

Question

我想在不使用 SVG 的情况下实现这样的效果:

https://codepen.io/arforcee/pen/erbKi?limit=all&page=2&q=circular+loader

这是否可能，如果可能，有人可以就此提出建议吗？

带有 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;
  }
}

Answer 1

我发现了一个有趣的here .它通过应用 border-radius: 100%;

有效地创建了一个圆形元素

然后它为 border-top 应用不同的颜色，这样只有边框的四分之一被突出显示。然后使用您在示例中看到的关键帧动画旋转整个元素。

您可以举个例子，添加一个background-color，调整边框颜色并创建您想要的内容