Gray out divs / page content while page is loading

enter image description here

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

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