You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.4 KiB
70 lines
1.4 KiB
import React from 'react'; |
|
import { makeStyles } from '@material-ui/core/styles'; |
|
import CircularProgress from '@material-ui/core/CircularProgress'; |
|
|
|
// Inspired by the former Facebook spinners. |
|
const useStylesFacebook = makeStyles((theme) => ({ |
|
root: { |
|
position: 'relative', |
|
top: '2px', |
|
right: '2px', |
|
marginLeft: '6px', |
|
|
|
}, |
|
bottom: { |
|
color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], |
|
}, |
|
top: { |
|
color: '#1ED81E', |
|
animationDuration: '550ms', |
|
position: 'absolute', |
|
left: 0, |
|
}, |
|
circle: { |
|
strokeLinecap: 'round', |
|
}, |
|
})); |
|
|
|
function FacebookCircularProgress(props) { |
|
const classes = useStylesFacebook(); |
|
|
|
return ( |
|
<div className={classes.root}> |
|
<CircularProgress |
|
variant="determinate" |
|
className={classes.bottom} |
|
size={34} |
|
thickness={4} |
|
{...props} |
|
value={100} |
|
/> |
|
<CircularProgress |
|
variant="indeterminate" |
|
disableShrink |
|
className={classes.top} |
|
classes={{ |
|
circle: classes.circle, |
|
}} |
|
size={34} |
|
thickness={4} |
|
{...props} |
|
/> |
|
</div> |
|
); |
|
} |
|
|
|
const useStyles = makeStyles({ |
|
root: { |
|
// flexGrow: 1, |
|
}, |
|
}); |
|
|
|
export default function CustomizedProgressBars() { |
|
const classes = useStyles(); |
|
|
|
return ( |
|
<div className={classes.root}> |
|
<FacebookCircularProgress /> |
|
</div> |
|
); |
|
}
|
|
|