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

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