• Only use when the target structure and layout are known. 
• Use when the loading time exceeds 1 second. 
• Use generic cell or card placeholders or build customized placeholders with basic placeholders if needed. 
• Provide users with feedback when the loading time is longer than expected or when data retrieval fails.

• Don’t use placeholder types that don’t match the target type. 
• Don’t get too detailed with customized placeholders, as it can distract the user. 
• Don’t combine multiple types of progress indicators with skeleton loading.

A. Placeholder

The placeholder is used to replace the actual content during skeleton loading. Ideally, the placeholder should correspond to the content in terms of type, layout, and size. If specific details can’t be defined, make sure the type of placeholder aligns with the content.

B. Container

All cells, cards, or page placeholders should stay within a container. The container has fixed lines, paddings, and margins, so there may be variations in size between the placeholder container and the actual content container.

Transition

By default, skeleton loading includes a shimmer effect animation, which consists of a black shimmer with 8% opacity that moves from left to right in a continuous loop.

Basic placeholders are the fundamental of skeleton loading. They can also be used to build customized placeholders.

Text Placeholders 

There are five height options for text placeholders with adjustable width. We recommend using these options instead of the following font sizes: 

• Foot note, Caption 1, Caption 2: 13pt
• Subhead, Callout, Body, Headline, Title 3: 20pt
• Title 2, Title 1: 28pt
• Large Title, Medium KPI: 41pt
• Large KPI: 57pt 

Please refer to Typography to learn more about font sizes.

Image Placeholders 

The image placeholder offers various size options. The icon is optional and can be changed to any icon according to Iconography.

Avatar Placeholders 

The avatar placeholder comes with multiple fixed size options, and can be used to replace avatars or KPI progress charts.

Button Placeholders 

Button placeholders can be used to replace label buttons, symbol buttons, filter buttons, or tags.

Object Cell Placeholders 

Object cell placeholders can be used to replace one-line or multi-line object cells.

Card placeholders are used for skeleton loading at card level, such as one-line and multi-line object card, analytic data table card, list card. If the card type can’t be defined, use the generic card placeholder.

Header placeholders are used to replace headers on a screen during skeleton loading, such as the object header.