import { Box, CircularProgress, Typography } Since “@mui/material”;
import moment Since “moment”;
import { useState, useRef, useEffect } Since “react”;
const Circular progress bar = (accessories) => {
const initial time = 10; // in seconds
const [timeLeft, setTimeLeft] = useState(initial time);
const [progressBarPercent, setProgressBarPercent] = useState(0);
const Timer ID = useRef();
useEffect(() => {
if (initial time) {
Timer ID.current = window.setInterval(() => {
setTimeLeft((previousProgress) => previousProgress – 1);
}, 1000);
back () => {
clearinterval(Timer ID.current);
};
}
}, []);
useEffect(() => {
if (initial time) {
if (progressBarPercent < 100) {
to leave updateProgressPercent = Mathematics.round(
((initial time – (remaining time – 1)) / initial time) * 100
);
setProgressBarPercent(updateProgressPercent);
}
if (remaining time === 0 && Timer ID.current) {
clearInterval(Timer ID.current);
back;
}
}
}, [timeLeft]);
back (
<Box
sex={{
display: “flex”,
alignItems: “center”,
justifyContent: “center”,
boxShadow: “0px 2px 10px rgba(0, 0, 0, 0.15)”,
width: “100%”,
padding: “20px”
}}
>
<Box sex={{ position: “relative”, display: “inline flex” }}>
<CircularProgress
variant=“determined”
size=“20 minutes”
value={progressBarPercent}
sex={{
color: progressBarPercent > 90 ? `red` : “blue”
}}
/>
<Box
sex={{
high: 0,
LEFT: 0,
down: 0,
RIGHT: 0,
position: “absolute”,
display: “flex”,
alignItems: “center”,
justifyContent: “center”
}}
>
<Typography sex={{ fontWeight: 400, font size: “25px” }}>
Time LEFT:
</Typography>
<Typography sex={{ fontWeight: 700, font size: “25px”, ml: 1 }}>
{moment
.UTC(1000 * remaining time)
.format(
`${remaining time > 3600 ? “H.H.[h]:mm[m]:ss[s]” : “mm[m]:ss[s]”} `
)}
</Typography>
</Box>
</Box>
</Box>
);
};
export default Circular progress bar;
