title: ReactJS animate border or circle based on timer
body: <p>I want to show a timer that is reducing every second and animate the circle. So the number in the circle will reduce every second and the circle will also reduce at the same time. What I mean by the circle will reduce is that based on the timer value the part of the circle will disappear/cut. So in the following image, the blue bar will decrease every second. </p>
  
  <p><a href="https://i.stack.imgur.com/Lml6S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lml6S.png" alt="enter image description here"></a></p>
  
  <p>My code: </p>
  
  <pre><code>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 (
          &lt;div style={cir}&gt;
            {this.state.timer}
          &lt;/div&gt;
        );
      }
  }
  
  
  export default CircleAnimation
  </code></pre>
  
  <p>How can this be achieved with ReactJS or Javascript? </p>