import { LinearProgressProps, Box, LinearProgress, Typography } from '@mui/material'; import React from 'react'; // The following code has been taken from the mui example // Thanks for that mui export type LinearProgressWithLabelProps = LinearProgressProps & { value: number }; const LinearProgressWithLabel: React.FC<LinearProgressWithLabelProps> = (props) => { return ( <Box sx={{ display: 'flex', alignItems: 'center' }}> <Box sx={{ width: '100%', mr: 1 }}> <LinearProgress variant="determinate" {...props} /> </Box> <Box sx={{ minWidth: 35 }}> <Typography variant="body2" color="text.secondary">{`${Math.round( props.value, )}%`}</Typography> </Box> </Box> ); } export default LinearProgressWithLabel;