Button loading indicator border animation - css

Question

I want to animate the button while waiting for an async call to finish. Disabling the button and putting a spinner in the middle or next to it obviously works, but feels a little boring these days. I thought it would be neat to have a little border animation on loop. Similar to
https://codepen.io/sarath-ar/pen/dMKxxM
Specifically, the 3rd button they have demoed. It fills the border nicely on hover, but what I'm imagining is after it fills the border, it then undoes the border color in the same direction. It "chases" the other animation if you will.
I was fiddling with their css, but I can't seem to figure out how to loop the border animation (I did successfully reverse the animation), but I'm struggling to loop it due to the :before and :after.
So I guess the primary quest is, how do you loop an animation when it relies on the ::before and ::after css selectors. To simplify, how would I loop the below css? (I realize that isn't all the css, but in general how would you loop that?)
.btn-1::before{
right: 0;
top: 0;
}
.btn-1::after{
left: 0;
bottom: 0;
}
.btn-1:hover::before, .btn-1:hover::after{
transition-delay: 0s;
}

Answer 1

What you want to use is CSS animation and have it continue looping through the animation via animation-iteration-count: infinite.
Here's what this would look like: https://codepen.io/jerrylow/pen/eXmroN?editors=1100
For simplicity imaging we want each edge's duration to be 1s. The total time becomes 8s because 1s per side for 4 sides times 2 because there's the unwind cycle. A side's animation looks like this:
#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%;
}
}
The animation will run for the whole 8s so 1/8th is 12.5% after a full cycle (4s) you want to unwind for the 5th second which is 50% - 62.5% (12.5 * 5). After that we want to keep it at "winded" up until the next cycle.
Edit: If you want an overlap for the cycle to kick in before the next cycle starts you can play with the percentage by calculating the time yourself.