Skeleton Screens
What is Skeleton Screens
Skeleton screens are blank pages that are progressively populated with content, such as text and images, as they become available. Grey or neutral-toned filled shapes, called placeholders, meet the user instantly upon user interaction with calls to action or links. The placeholders which we call as “Skeleton Screens” are then replaced with the actual site content after page loading is finshed and it is ready to display.
You can decrease page loading time up to 90 or 95 percent using skeleton screens.
How to enable Skeleton Screens
Navigate to Molla > Theme Options > General > Skeleton Screens section and check option.
Skeleton screens are available in shop page, product page, product quickview and blog pages.
How to customize skeletons
Each skeleton is drawn using css “background-image: linear-gradient”. You can find its code in “Skeleton screen” section in skeleton.scss.
If you want to change default product skeleton in shop pages, you can use following css selector.
.skeleton-body .skel-pro:before { background-image: linear-gradient… }