My goal is to progressively fill a border every minute, reaching full capacity after 60 minutes and then starting over.
This task is part of my practice with react.js. I attempted to create a variable using .getMinutes(); to track the current number of minutes, but I am struggling with how to incrementally fill the border each minute.
<body>
<div className="progress_container">
<div className="progressbar">
<p className="innertext">
<h2>{playtime + '/60'}</h2>
min
</p>
</div>
</div>
</body>
.progress_container{
width: 250px;
height: 250px;
border-radius: 50%;
background: white;
position: absolute;
right: calc(100% - 600px);
left: auto;
bottom: calc(100% - 350px);
}
.progressbar{
width: 190px;
height: 190px;
border-radius: 50%;
border: 30px solid orange;
}
.progressbar:after{
content: '';
}
p{
color: #000;
font-size: 16px;
position: relative;
top: calc(95px - 3*16px);
}
let pb = document.getElementsByClassName('progressbar');
var date = new Date (Date.now());
const playtime = date.getMinutes();
I have searched for alternative solutions, but integrating them with react.js proved unsuccessful, resulting in numerous errors.