A skeleton screen is essentially a blank version of a page into which information is gradually loaded.” – Luke Wroblewski
spinner
skeleton
What's Next ?
+
const shimAnimation = keyframes({
'0%': {
backgroundPosition: '0 0', // horizontal, vertical
},
'100%': {
backgroundPosition: `${window.innerWidth}px 0`,
},
});
const ANIMATION_BACKGROUND_BUNDLE = {
background: 'linear-gradient(to right, #eeeeee 0%, #dddddd 10%, #eeeeee 25%)',
animationName: shimAnimation,
animationDuration: '1s',
animationFillMode: 'forwards',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
};
#eeeeee
#dddddd
#eeeeee
10
25
100
利用「與底色相同」色塊來遮蔽不必要的線條
(白色遮蔽區塊以紅色標記)
Target
Target
gray: { position: 'relative', overflow: 'hidden' }
blue: {
position: 'absolute',
top: -20,
left: -20,
borderRadius: '50%',
borderWidth: '20px solid blue',
}
Demo