...

• Base color: the color of the skeleton cell.

• Shimmer color: the color that waves through the cell. Darker than the base color.

• Direction: the animation should move from left to right within each skeleton cell.

• Duration: the shimmer effect should last for 4 seconds.

...

Best practices

Do:

• Use for infinite scroll, when users need to dynamically load new content on scroll, such as for casual browsing and research.

• Use skeleton cells which are in the same positions and a similar shape to the content that will replace them.

• Show loaded data as soon as possible, replacing the skeleton cells.

• Use a shimmer animation to show that content is being loaded.

• Display a corresponding System Error if lazy loading fails.

...