I'm looking to add animation to MUI LinearProgress. I have the animation keyframes code, but I'm not sure how to implement the stripes effect. Any advice would be appreciated.
Here is the code snippet I have:
import React, { FunctionComponent } from 'react';
import { Box, LinearProgress, LinearProgressProps } from '@mui/material';
import { styled, keyframes } from '@mui/material/styles';
const stripes = keyframes`
from {
background-position: 0 0;
}
to {
background-position: 30 0;
}
`;
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
height: 8,
borderRadius: 5,
animation: `${stripes} .3s linear infinite reverse`,
}));
const LinearProgressBar: FunctionComponent<LinearProgressProps> = (props) => {
return (
<Box sx={{ width: '100%' }}>
<BorderLinearProgress {...props} />
</Box>
);
};
export default LinearProgressBar;
Desired Output: Similar to this example
Blueprint CSS: CSS Reference Link
Check out the code on Stackblitz: Link