forked from Uniswap/interface
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathloading.css.ts
More file actions
35 lines (31 loc) · 766 Bytes
/
Copy pathloading.css.ts
File metadata and controls
35 lines (31 loc) · 766 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { keyframes, style } from '@vanilla-extract/css'
import { darken } from 'polished'
import { sprinkles } from './sprinkles.css'
const loadingAnimation = keyframes({
'0%': {
backgroundPosition: '100% 50%',
},
'100%': {
backgroundPosition: '0% 50%',
},
})
export const loadingBlock = style([
{
animation: `${loadingAnimation} 1.5s infinite`,
animationFillMode: 'both',
background: `linear-gradient(to left, #7C85A24D 25%, ${darken(0.8, '#7C85A24D')} 50%, #7C85A24D 75%)`,
backgroundSize: '400%',
willChange: 'background-position',
},
])
export const loadingAsset = style([
loadingBlock,
sprinkles({
borderRadius: '12',
cursor: 'default',
color: 'transparent',
}),
{
userSelect: 'none',
},
])