旋转圆CSS

我正在尝试创建一个旋转加载循环。我希望红色在旋转结束时缩短，就像现在一样：

我使用另一个带有白色边框颜色的微调器来实现这个效果，但是当白色边框覆盖在边框上时，我可以看到边框上有一个微小的红色。我怎样才能去掉边界上的红色

@keyframes top-cricle {
  from {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(335deg);
  }
}
@keyframes bottom-cricle {
  from {
    transform: rotate(-15deg);
  }
  to {
    transform: rotate(345deg);
  }
}
html {
  background-color: white;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 30px;
  .spinner {
    padding-right: 35px;
    & > span {
      display: inline-block;
      position: absolute;
      border-radius: 100px;
      padding: 8px;
      border: 5px solid transparent;
      &.top {
        border-top: 5px solid white;
        animation: top-cricle 1s ease-in-out infinite;
        animation-delay: 0.2s;
      }
      &.bottom {
        border-top: 5px solid #c23531;
        animation: bottom-cricle 1s ease-in-out infinite;
      }
    }
  }
}

---

详细说明我在评论中所说的，我不确定是否可以这样做，特别是考虑到对象太小（没有太多调整的空间）

相反，您可以创建一系列较小的片段，这些片段彼此堆叠并共享相同的颜色

这是我根据你的代码做的粗糙的小提琴 更改如下：

  .spinner {
    padding-right: 35px;
    & > span {
      display: inline-block;
      position: absolute;
      border-radius: 100px;
      padding: 8px;
      border: 5px solid transparent;

      animation: top-cricle 1s ease-in-out infinite;
      border-top: 5px solid #c23531;

      &:nth-child(1) {
        animation-delay: -0.15s;
      } 
   }
}

你可能想再调整一些尺寸，但核心概念就在那里，希望你能调整它以适应你的需要

---

这一解决方案值得赞扬。您也可以使用这些开源图标

我只是将白色边框顶部的动画延迟增加到0.5s，问题就解决了。似乎延迟有点不关键（如果允许我在此上下文中使用此表达式）

---

我不知道是否可以这样做，但这一页上有一个类似的微调器，你可以尝试在它使用圆圈的几个小段来创建效果后将其设置为基准。另外，您的关键帧类使用“cricle”一词而不是“circle”，感谢您在loading.io上找到这一点。那接近我想要的。

&.top {
    border-top: 5px solid white;
    animation: top-cricle 1s ease-in-out infinite;
    animation-delay: 0.5s;
  }