If you prefer to separate these components, it might be the best approach since they possess distinct props. However, if you wish to combine them into a single component, you must assign a dynamic value ranging from 0 to 100 to the determinate variant. To understand this better, refer to the code example in the documentation source code example.
In your scenario, you might want to use a ternary operator to decide which variant to render. As a simple demonstration, the following snippet should suffice (please note that I'm neglecting the value prop and imitating it with progress for illustrative purposes):
import React from "react";
import Grid from "@mui/material/Grid";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import CircularProgress from "@mui/material/CircularProgress";
import Box from '@mui/material/Box';
const CircularLoader = ({
height = "auto",
color = "primary",
text = "",
value = 0,
variant = "indeterminate"
}) => {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) =>
prevProgress >= 100 ? 0 : prevProgress + 10
);
}, 800);
return () => {
clearInterval(timer);
};
}, []);
return (
<Grid
component="div"
container
justifyContent="center"
alignItems="center"
flexDirection="column"
sx={{ height }}
>
{variant === "indeterminate" ? (
<CircularProgress />
) : (
<Stack spacing={2} direction="row">
<Box sx={{ position: 'relative', display: 'inline-flex' }}>
<CircularProgress variant="determinate" value={progress}/>
<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(progress)}%`}
</Typography>
</Box>
</Box>
</Stack>
)}
<Typography variant="body1" component="div" color={color}>
{text}
</Typography>
</Grid>
);
};
export default CircularLoader;
progress is only being simulated here for demonstration purposes. In actuality, you should pass down the progress as value through props and utilize it in the CircularProgress component (it should reflect some dynamic value associated with the real loading progress state).
Link to Sandbox