35 lines
870 B
TypeScript
35 lines
870 B
TypeScript
import { keyframes, style } from '@vanilla-extract/css';
|
|
|
|
import * as colors from '../../colors.css';
|
|
|
|
export const loading_squares = style({
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
width: '100%',
|
|
marginTop: '4em',
|
|
height: 'max-content',
|
|
});
|
|
|
|
const animation = keyframes({
|
|
'0%': { backgroundColor: colors.background2 },
|
|
'50%': { backgroundColor: colors.foreground },
|
|
'100%': { backgroundColor: colors.background2 },
|
|
});
|
|
|
|
export const square = style({
|
|
margin: '0 1em',
|
|
width: '1em',
|
|
height: '1em',
|
|
backgroundColor: colors.background2,
|
|
animationName: animation,
|
|
animationDuration: '2s',
|
|
animationIterationCount: 'infinite',
|
|
});
|
|
|
|
export const loading = [0, 1, 2, 3, 4].map(index =>
|
|
style([square, {
|
|
animationDelay: `${0.2 * index}s`
|
|
}])
|
|
);
|
|
|
|
|