I am making a timer app in which there is initially a white ring surrounding the time remaining. I want to color the ring surrounding the time remaining to slowly turn red, with it being completely red as the time runs out.
<div className="countdown-timer">
<span>{remainingTime.hours}</span>
<span>:</span>
<span>{remainingTime.minutes}</span>
<span>:</span>
<span>{remainingTime.seconds}</span>
</div>
.countdown-timer {
width: 400px;
height: 400px;
border: 6px solid white;
border-radius: 50%;
box-shadow: black;
font-family: "DM Sans";
font-size: 72px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
I tried an approach with concentric circles but did not get the intended effect I wanted.
This is what I am going for: https://phpout.com/wp-content/uploads/2023/07/AVOz3.png
2
Answers
where X.time is the time above which it should remain white while less than that it will turn red