36 lines
840 B
TypeScript
36 lines
840 B
TypeScript
|
import { Box, SxProps, Theme } from "@mui/material";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
sx?: SxProps<Theme>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function RunningStripe({ sx = [] }: Props) {
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
component="span"
|
||
|
|
sx={[
|
||
|
|
{
|
||
|
|
position: "absolute",
|
||
|
|
height: "70px",
|
||
|
|
width: "140px",
|
||
|
|
background:
|
||
|
|
"linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%)",
|
||
|
|
animation: "runningStripe linear 3s infinite",
|
||
|
|
transform: "rotate(-60deg)",
|
||
|
|
"@keyframes runningStripe": {
|
||
|
|
"0%": {
|
||
|
|
left: "-150px",
|
||
|
|
opacity: 1,
|
||
|
|
},
|
||
|
|
"25%, 100%": {
|
||
|
|
left: "100%",
|
||
|
|
opacity: 0,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
...(Array.isArray(sx) ? sx : [sx]),
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|