Skeleton Placeholder Shimmer

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. – Luke Wroblewski

spinner

skeleton

Advantages

  • Eliminates surprises
  • Gradual progression
  • Perceived Performance

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

Repo: https://github.com/travor20814/skeleton-placeholder-react

Port: 1222

Skeleton Placeholder Shimmer

By Travor Lee

Skeleton Placeholder Shimmer

  • 144