How to make the border move forward like a progressbar (react.js)
Question
I would like to have my border filled every minute, so that it is full after 60 minutes and then starts again from the beginning.
Its an exercise for me with react.js I've already tried to create a variable using .getMinutes (); I can now spend the current number of minutes but I have no idea how I can fill my border per 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 tried to look up for some other solutions but it doesnt worked with react.js. Often the output was tons of errors
1 answers
solution1
0 2019-06-26 21:39:55
It's impossible to modify the width of a border but you can create an scrollbar like this:
.scrollbar-ctn { width: 100%; height: 5px; background-color: #999; } .scrollbar { height: 100%; width: 30%; background-color: blue; }
<div class="scrollbar-ctn"> <div class="scrollbar"></div> </div>
and then you can simply update the percentage width of .scrollbar with js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.