Gray out divs / page content while page is loading

Question

how can I achive something similar to youdemy's way of loading pages ? as you can see the divs/ the page content is grayed out initially and once the page loads the content appears.

How can I achieve something similar to this ?

Answer 1

This type of loading is called as skeleton loading effect. You have to follow some steps to achieve this effect

1. Create a skeleton for your items
2. Add transition and animation to the skeleton(placeholders).
3. Add js loading script and load multiple skeletons till loading finished.

You can follow this tutorial, if you need to clarify anything. Skeleton tutorial