Example
Skeleton loaders
The skeleton should mirror the actual design as closely as possible.
But even if it isn't really precise, it still gives a better experience than spinners in most cases.
A skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
Skeleton loaders are the same color as the text color at 7% opacity.
The skeleton should mirror the actual design as closely as possible.
But even if it isn't really precise, it still gives a better experience than spinners in most cases.
The skeleton elements take up 100% width of their containing element and uses the font-size as the basis for the height.