first

src/components/@extended/progress/LinearWithLabel.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { Box, LinearProgress, Typography } from '@mui/material';
+
+// ==============================|| PROGRESS - LINEAR WITH LABEL ||============================== //
+
+export default function LinearWithLabel({ value, ...others }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" value={value} {...others} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
+LinearWithLabel.propTypes = {
+  value: PropTypes.number
+};