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
33 lines (30 loc) · 764 Bytes
/
Copy pathloading.css.ts
File metadata and controls
33 lines (30 loc) · 764 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
import { keyframes, style } from '@vanilla-extract/css'
import { sprinkles, vars } from 'nft/css/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, ${vars.color.surface1} 25%, ${vars.color.surface3} 50%, ${vars.color.surface1} 75%)`,
backgroundSize: '400%',
willChange: 'background-position',
},
])
export const loadingAsset = style([
loadingBlock,
sprinkles({
borderRadius: '12',
cursor: 'default',
color: 'transparent',
}),
{
userSelect: 'none',
},
])