text: import { Box , CircularProgress, Typography} from '@material-ui/core';
  import LinearProgress from '@material-ui/core/LinearProgress';
  
  export function LinearProgressWithLabel(props) {
      return (
          <Box display="flex" alignItems="center">
              <Box width="100%" mr={1}>
                  <LinearProgress variant="determinate" {...props} />
              </Box>
          </Box>
      );
  }
  
  
  export function CircularProgressWithLabel(props) {
      return (
        <Box position="relative" display="inline-flex">
          <CircularProgress variant="determinate" {...props} />
          <Box
            top={0}
            left={0}
            bottom={0}
            right={0}
            position="absolute"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Typography
              variant="caption"
              component="div"
              color="textSecondary"
            >{`${Math.round(props.value)}%`}</Typography>
          </Box>
        </Box>
      );
    }