Skeleton

Visual placeholder that indicates the structure of the content before the actual data is loaded

Layout

When you’re applying a skeleton, choose only the most important information to replace it with a shape. You want to capture the overall structure, not every single detail.

 

 

Shapes

There are 2 shapes that a skeleton comes in: circle and rectangle. Either of these should fit the general structure of any UI element.

 

 

Color application

Skeletons animate from NeutralStencil1Rest (#E4E7E7) to NeutralStencil2Rest (#F8F8F8).