How to fill circle border based on progress in REACTJS - reactjs

Question

How to complete the border of circle based on selected option.
Here is four options.
1.Head
2.Body
3.Script
4.End Note
And I have a circle on side. What I am trying to do is, Head is by default active so circle border should be red color till 25% of its total area, then after selection of body it should be 50%. So on and at the end it should 100%.
Here is my code which I tried on click its changing text color till 4 clicks but I want above kind of thing.Being beginner in ReactJS I am unable to get this logic.
import React, { Component } from "react";
export default class Test extends Component {
constructor(props) {
super(props);
this.state = {
title: "Click here",
color:"red",
active:false,
clicks: 0,
}
}
getInitialState() {
return {
count: 0
};
}
changeTitle = () => {
this.setState((prevState) => ({
clicks: prevState.clicks + 1,
title: "New title",color:"green",active:true,
}));
};
render() {
return (
<div>
<div>count:{this.state.clicks}</div>
<h1 onClick={this.changeTitle.bind(this)} >Hello World </h1>
<h1 style={this.state.clicks===1 ? {color:"red"}:
(this.state.clicks===2)?{color:"yellow"}:
(this.state.clicks===2)?{color:"black"}:
{color:"green"}}>This is Magic: {this.state.title}</h1>;
</div>
)
}
}

Answer 1

Shoutout to #Ron for providing an answer in jquery (https://stackoverflow.com/a/50208291/7956790).
Use the css provided by #Ron.
Ok, here's the render function in React:
// your previous code
render() {
return (
<div id="circle-container">
<div className="quarter top-left">
<div className="quarter-fill top-left-fill" onClick={this.handleTopLeftClick}></div>
</div>
<div className="quarter top-right">
<div className="quarter-fill top-right-fill" onClick={this.handleTopRightClick}></div>
</div>
<div className="quarter bottom-left">
<div className="quarter-fill bottom-left-fill" onClick={this.handleBottomLeftClick}></div>
</div>
<div className="quarter bottom-right">
<div className="quarter-fill bottom-right-fill" onClick={this.handleBottomRightClick}></div>
</div>
</div>
);
}
Hook your onClick listeners to your arcs, e.g. onClick={this.handleTopRightClick} and bind them in the constructor function:
constructor(props) {
super(props);
this.handleTopLeftClick.bind(this);
this.handleTopRightClick.bind(this);
this.handleBottomLeftClick.bind(this);
this.handleBottomRightClick.bind(this);
}
And now define your handler functions in your class:
handleTopLeftClick() { }
handleTopRightClick() { }
handleBottomLeftClick() { }
handleBottomLeftClick() { }