CODEWITHSUNDEEP
javascripthtml
Gonee Goni
Gonee Goni

Reputation: 43

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 ?

Upvotes: 3

Views: 2011

Answers (1)

Nimna Perera
Nimna Perera

Reputation: 1065

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

Upvotes: 5

Related Questions