Spinning Circle CSS - css

Question

I am trying to create a spinning loading circle. I want the red color to be shortened at the end of the spinning as it is right now:
https://jsfiddle.net/mz41spv4/1/
I use another spinner with white border color to achieve this effect, but I can see there's tiny red color on the border when the white border is covering on top of it. How can I remove this tiny red color on the border?
#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;
}
}
}
}

Answer 1

Elaborating on what I said in my comment, I'm not sure if it's possible to do, especially considering the objects are so small (there isn't much room for adjustment).
Instead what you could do is create a series of smaller segments that stack up on one another and share the same color.
Here's the rough fiddle I made based on your code
https://jsfiddle.net/mz41spv4/2/ with the changes as follows
.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;
}
}
}
You may want to adjust sizes some more, but the core concept is there, and hopefully you can adjust it to fit what you need.
Credit goes to https://loading.io/css/ for the solution. You can use those open source icons as well

Answer 2

I simply increased the animation-delay of the white border-top to 0.5s, and the problem was solved. It seems the delay was a bit off-key (if I am allowed to use this expression in this context)
&.top {
border-top: 5px solid white;
animation: top-cricle 1s ease-in-out infinite;
animation-delay: 0.5s;
}
https://jsfiddle.net/mz41spv4/4/