I'm looking to implement a timer that counts down every second while also animating a circle. The number inside the circle should decrease each second, and the circle itself should shrink accordingly. By "the circle will reduce", I mean that as the timer decreases, a portion of the circle will disappear or be cut off. In the provided image, you can see the blue bar decreasing over time.
https://i.sstatic.net/Lml6S.png
Here is my current code snippet:
import React, { Component } from 'react';
const cir = {
height: "50px",
width: "50px",
borderRadius: "50px",
borderStyle: "solid",
borderColor: "green",
}
class CircleAnimation extends Component {
state = {
timer: 10
}
render() {
return (
<div style={cir}>
{this.state.timer}
</div>
);
}
}
export default CircleAnimation
Can anyone provide guidance on how to achieve this functionality using ReactJS or Javascript?