Css 按钮加载指示器边框动画

我想在等待异步调用完成时设置按钮的动画。禁用按钮，把一个纺纱机在中间或它旁边显然是工作，但感觉有点无聊这些天。我认为在循环上有一个小小的边界动画会很好。近似

特别是他们演示的第三个按钮。悬停时它会很好地填充边框，但我想象的是，在填充边框后，它会在同一方向上撤消边框颜色。如果愿意，它将“追逐”其他动画

我在摆弄他们的css，但我似乎不知道如何循环边界动画（我成功地反转了动画），但由于：before和：after，我很难循环它

所以我想主要的问题是，当动画依赖于：：before和：：after css选择器时，如何循环动画。为了简化，我将如何循环下面的css？（我意识到这并不是所有的css，但一般来说，你会如何循环呢？）

---

您想要使用的是CSS动画，并让它通过

动画迭代计数：无限

继续在动画中循环

下面是它的样子：

为了简化成像，我们希望每条边的持续时间为

1s

。总时间变为

8s

，因为4个边的每边

1s

乘以2，因为存在展开循环。侧面的动画如下所示：

@keyframes btn-border-top {
  0% {
    left: auto;
    right: 0;
    width: 0%;
  }
  12.5% {
    left: auto;
    right: 0;
    width: 100%;
  }
  12.6% {
    left: 0;
    right: auto;
  }
  50% {
    width: 100%;
  }
  62.5% {
    width: 0%;
  }
  100% {
    left: 0;
    right: auto;
    width: 0%;
  }
}

动画将在整个

8s

中运行，因此在一个完整的循环（4s）后，八分之一是

12.5%

，您希望在第5秒中展开，即

50%-62.5%

（12.5*5）。在那之后，我们希望在下一个周期之前保持它处于“饱和”状态

编辑：如果你想在下一个周期开始前开始一个周期的重叠，你可以通过自己计算时间来调整百分比。

你可以检查这个：我想这正是你想要的

@keyframes btn-border-top {
  0% {
    left: auto;
    right: 0;
    width: 0%;
  }
  12.5% {
    left: auto;
    right: 0;
    width: 100%;
  }
  12.6% {
    left: 0;
    right: auto;
  }
  50% {
    width: 100%;
  }
  62.5% {
    width: 0%;
  }
  100% {
    left: 0;
    right: auto;
    width: 0%;
  }
}