pawol.nu/components/stats/bar-stats.js

import PropTypes from 'prop-types'
import {styled} from '@mui/material/styles'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import LinearProgress, {linearProgressClasses} from '@mui/material/LinearProgress'

const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({
  height: 10,
  borderRadius: 5,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: 200,
    ...theme.applyStyles('dark', {
      backgroundColor: 800
    })
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 5,
    backgroundColor: '#1a90ff',
    ...theme.applyStyles('dark', {
      backgroundColor: '#308fe8'
    })
  },
}))

export default function BarStats({percent}) {
  return (
    <Box sx={{display: 'flex', alignItems: 'center'}}>
      <Box sx={{width: '100%'}}>
        <BorderLinearProgress variant='determinate' value={percent} />
      </Box>
      <Box sx={{minWidth: 35}}>
        <Typography textAlign='right' sx={{fontWeight: 'bold'}} variant='body2' color='text.secondary'>{`${Math.round(
          percent,
        )}%`}</Typography>
      </Box>
    </Box>
  )
}

BarStats.propTypes = {
  percent: PropTypes.number.isRequired,
}