Skeleton
When the page loading time is longer, the approximate structure of the page should be displayed first to alleviate the user's waiting anxiety.
Anatomy
paragraph skeleton screen
If it is necessary to explain other situations, please continue to supplement the content that needs to be explained below...
Card/Image/Skeleton Screen
If it is necessary to explain other situations, please continue to supplement the content that needs to be explained below...
Button skeleton screen
If it is necessary to explain other situations, please continue to supplement the content that needs to be explained below...
Avatar skeleton screen
If it is necessary to explain other situations, please continue to supplement the content that needs to be explained below...
Skeleton loading screen
If it is necessary to explain other situations, please continue to supplement the content that needs to be explained below...
Usage scenario
When to use skeleton screens and when to use loading
Skeleton screen: If the structure of the loaded content is known, prioritize using a skeleton screen (even if the loading is fast), such as for regular function pages, list pages, card pages, and fixed format activity pages.
Loading: For actions triggered actively or passively by the user (such as saving, paying, or during poor network conditions), a clear Loading status must be used (such as button Loading). This provides critical operational feedback, informing the user that their command has been received.
Terms of Use
First load the page content (such as the launch page, opening a new page), partial page refresh (such as page turning, filtering), slow network conditions (delays >800ms)
Prohibited scene
Instant loading (<300ms) without displaying skeleton
Illuminate Example
fill-table-accent
fill-table-accent
functional-neutral-container
The level is scanned from left to right.
If it is necessary to explain other situations, please continue to supplement the content that needs to be explained below...
Condition one: Long wait scenario (0.8~3 seconds)
You can enable sweeping light during long waits, such as the API interface response delay threshold.
Condition two: Key conversion path nodes
For example, during the payment process after submission, the form submission process, and the account registration verification stage, the scanning process can be used to alleviate user waiting anxiety.
Disable Condition 1: Micro content loading (<0.8 seconds)
A static skeleton should be used for less than 0.8 seconds (to avoid visual noise)
Disable Condition Two: Repetitive Structure
Continuous loading of table rows, card flow waterfall layout, using static skeleton for message list scrolling loading.
Usage
Do
Don't
Maintain consistency with the final UI layout (≥90% layout matching degree)
Skeleton screen
Loading placeholder
Placeholder box
Loading frame
Placeholder screen