@elacity-js/uikit
Version:
React / Material UI Design kit for Elacity project
53 lines (50 loc) • 1.91 kB
JavaScript
import { __rest } from '../node_modules/tslib/tslib.es6.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Box } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Logo } from '../assets/Logo.js';
const SlashScreen = () => (jsx(Box, Object.assign({ sx: {
backgroundColor: 'background.paper',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
height: '100%',
width: '100%',
position: 'fixed',
top: 0,
left: 0,
zIndex: 9999,
} }, { children: jsx(Logo, { sx: {
width: 200,
} }) })));
const DotSpinnerWrapper = styled(Box)(({ theme }) => ({
margin: theme.spacing(0, 'auto'),
width: 80,
display: 'flex',
'& .loading': {},
'& .loading-dot': {
float: 'left',
background: theme.palette.primary.main,
width: theme.spacing(1),
height: theme.spacing(1),
margin: theme.spacing(0, 0.5),
borderRadius: '50%',
boxShadow: `0 0 2px ${theme.palette.background.paper}`,
animation: 'loadingFade 1s infinite',
'&:nth-of-type(1)': { animationDelay: '0s' },
'&:nth-of-type(2)': { animationDelay: '0.1s' },
'&:nth-of-type(3)': { animationDelay: '0.2s' },
'&:nth-of-type(4)': { animationDelay: '0.3s' },
},
}));
const DotSpinner = (_a) => {
var props = __rest(_a, []);
return (jsx(DotSpinnerWrapper, Object.assign({}, props, { children: jsxs("div", Object.assign({ className: "loading" }, { children: [jsx("div", { className: "loading-dot" }), jsx("div", { className: "loading-dot" }), jsx("div", { className: "loading-dot" }), jsx("div", { className: "loading-dot" })] })) })));
};
var Spinner = {
Splash: SlashScreen,
Dots: DotSpinner,
};
export { Spinner as default };
//# sourceMappingURL=Spinner.js.map