Javascript 带边框/周界的按钮作为加载程序？

抛开实际的网络集成方面不谈，创建周长/边框为加载程序的按钮的最佳css/javascript技术是什么，如下图所示：

---

你在找什么

.rect{
填充：绿色；
笔画宽度：3；
笔画：黄色；
边界半径：10%；
行程偏移：-50px；
动画：加载动画4s线性；
}
@关键帧加载程序动画{
0% {
笔划数组：0，400px；
}
100% {
笔划数组：400px，0；
}
}

您尝试了什么？你在哪里卡住了？我不知道从哪里开始。很明显，边框的“长度”不能从0%增加到100%，这样就不存在了。偏移背景适用于一个方向。SVG路径似乎最有可能，但我不确定要增加什么属性。您需要使用SVG来实现这一点。画一条围绕按钮边框的路径，然后根据百分比设置

stroke dashoffset

，以设置路径上的“进度”。这很好，只是我需要黄色动画位的长度增加，直到它成为完整边框。i、 e.“尾巴”保持固定，前面围绕盒子增加，直到它碰到尾巴（然后在所有四个边上基本上是一个规则的黄色边框）