34 lines
845 B
TypeScript
34 lines
845 B
TypeScript
import Box from "@mui/material/Box";
|
|
import CircularProgress, {
|
|
type CircularProgressProps,
|
|
} from "@mui/material/CircularProgress";
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
export function CircularProgressWithLabel(
|
|
props: CircularProgressProps & { value: number },
|
|
) {
|
|
return (
|
|
<Box sx={{ position: "relative", display: "inline-flex" }}>
|
|
<CircularProgress {...props} />
|
|
<Box
|
|
sx={{
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
position: "absolute",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="subtitle1"
|
|
component="div"
|
|
sx={{ color: "inherit" }}
|
|
>{`${Math.round(props.value)}%`}</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|