Need help to achieve "Skeleton Loading Effect"

Hello, Webflower’s
Hope you guys are doing well, I need to add a skeleton loading effect for the cards present in the website could anyone help me achieve this effect.

Link to the webflow site: https://preview.webflow.com/preview/skeletoneffect?utm_medium=preview_link&utm_source=designer&utm_content=skeletoneffect&preview=16d3b1cadfaabe13689bd5e968e028dc&mode=preview

Thanks in advance
Sachu

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2 Likes

hi @Sachu is not that hard, the only issue is going to be the timing and the amount of elements. Try following the next steps:

  1. Create the skeleton with only divs, inside a container under the name skeleton
  2. Place it in absolute position on top of the cards with a z-index of 1000
  3. Go to interactions → page triggers and select load page.
  4. The animation needs to show the skeleton until the page is fully loaded.
  5. The exit animation should be to reduce the opacity to 0% and after that hide the element. (This way you will have a smooth exit )
  6. Test it and play with the timing or delays.

Hope this helps!

Cheer,

1 Like

@Carlos_Ruiz_Del_Vizo Thank you for taking out your time to reply :peace_symbol:

Of course, let me know if it works!

For anyone else here - just made a very easy way to implement skeleton screens! Check this out

1 Like