I am creating a countdown timer circle. The animation functions properly on the initial iteration, however, the circle animation remains full after the first iteration and does not reset. Despite this, the countdown number continues to function correctly, resetting back to 20 and counting down once more. I am in need of the red countdown line to emulate this behavior.
First iteration:
https://i.sstatic.net/GXbTU.png
Second iteration:
https://i.sstatic.net/9u6kk.png
I have experimented with different additions such as:
animation: circletimer 59s linear infinite forwards;
and
animation-iteration-count: infinite
However, I am struggling to achieve the animation to occur multiple times.
Here is the current code:
Countdown component -
interface IProps {
countdown: number
}
const CountDownCircle: FunctionComponent<IProps> = ({
countdown,
}) => {
console.log(countdown)
return (
<div className={'countdown__circle'}>
<svg className={'countdown__circle-svg'} width="200px" height="200px">
<circle className={'circle'} cx="100" cy="100" r="28" />
</svg>
<span className={'timer'}>{countdown}</span>
</div>
)
}
export default CountDownCircle
css(scss) -
.countdown__circle {
position: absolute;
bottom: 34px;
right: 47px;
}
@keyframes circletimer {
0% {
stroke-dashoffset: 500;
stroke-dasharray: 500;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 500;
}
}
.countdown__circle-svg {
background-color: transparent;
position: absolute;
background-color: transparent;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateZ(-90deg);
.circle {
stroke: $red;
stroke-width: 5;
stroke-linecap: round;
fill: transparent;
stroke-dashoffset: 500;
stroke-dasharray: 0;
animation: circletimer 59s linear infinite forwards;
}
}
.timer {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $black;
font-size: 25px;
font-weight: 100;
font-family: $proximaBold;
}
Any suggestions on how to achieve the infinite animation loop?