first

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

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { Box, CircularProgress, Typography } from '@mui/material';
+
+// ==============================|| PROGRESS - CIRCULAR LABEL ||============================== //
+
+export default function CircularWithLabel({ value, ...others }) {
+  return (
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+      <CircularProgress variant="determinate" value={value} {...others} />
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+      >
+        <Typography variant="caption" component="div" color="text.secondary">{`${Math.round(value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
+CircularWithLabel.propTypes = {
+  value: PropTypes.number
+};

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

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { Box, CircularProgress, Typography, circularProgressClasses } from '@mui/material';
+
+// ==============================|| PROGRESS - CIRCULAR PATH ||============================== //
+
+export default function CircularWithPath({ value, size, variant, thickness, showLabel, pathColor, sx, ...others }) {
+  return (
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+      <CircularProgress
+        variant="determinate"
+        sx={{ color: pathColor ? pathColor : 'grey.200' }}
+        size={size}
+        thickness={thickness}
+        {...others}
+        value={100}
+      />
+      {showLabel && (
+        <Box
+          sx={{
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            position: 'absolute',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <Typography variant="caption" component="div" color="text.secondary">
+            {value ? `${Math.round(value)}%` : '0%'}
+          </Typography>
+        </Box>
+      )}
+      <CircularProgress
+        variant={variant}
+        sx={{
+          ...sx,
+          position: 'absolute',
+          left: 0,
+          [`& .${circularProgressClasses.circle}`]: {
+            strokeLinecap: 'round'
+          }
+        }}
+        size={size}
+        thickness={thickness}
+        value={value}
+        {...others}
+      />
+    </Box>
+  );
+}
+
+CircularWithPath.propTypes = {
+  value: PropTypes.number,
+  size: PropTypes.number,
+  variant: PropTypes.string,
+  thickness: PropTypes.number,
+  showLabel: PropTypes.bool,
+  pathColor: PropTypes.string,
+  sx: PropTypes.array,
+  others: PropTypes.array
+};

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

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { Box, LinearProgress } from '@mui/material';
+
+// ==============================|| PROGRESS - LINEAR ICON ||============================== //
+
+export default function LinearWithIcon({ icon, 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 }}>{icon}</Box>
+    </Box>
+  );
+}
+
+LinearWithIcon.propTypes = {
+  icon: PropTypes.node,
+  value: PropTypes.number
+};

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
+};