...
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.
...
Users should not be able to interact with content which is dependent on other elements in the interface which have not yet loaded.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |