40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
|
import { Box, CircularProgress, circularProgressClasses, CircularProgressProps } from "@mui/material";
|
||
|
|
import { forwardRef } from "react";
|
||
|
|
|
||
|
|
export interface FacebookCircularProgressProps extends CircularProgressProps {
|
||
|
|
bgColor?: string;
|
||
|
|
fgColor?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const FacebookCircularProgress = forwardRef(({ sx, bgColor, fgColor, ...rest }: FacebookCircularProgressProps, ref) => {
|
||
|
|
return (
|
||
|
|
<Box sx={{ position: "relative", ...sx }} ref={ref}>
|
||
|
|
<CircularProgress
|
||
|
|
variant="determinate"
|
||
|
|
sx={{
|
||
|
|
color: (theme) => bgColor ?? theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
|
||
|
|
}}
|
||
|
|
size={40}
|
||
|
|
thickness={4}
|
||
|
|
{...rest}
|
||
|
|
value={100}
|
||
|
|
/>
|
||
|
|
<CircularProgress
|
||
|
|
sx={{
|
||
|
|
color: (theme) => fgColor ?? theme.palette.primary.main,
|
||
|
|
position: "absolute",
|
||
|
|
left: 0,
|
||
|
|
[`& .${circularProgressClasses.circle}`]: {
|
||
|
|
strokeLinecap: "round",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
size={40}
|
||
|
|
thickness={4}
|
||
|
|
{...rest}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
export default FacebookCircularProgress;
|