How to create skeleton screens/content loaders on your Webflow site

Other use-cases using Memberscript #23: 

• https://www.memberstack.com/blog/how-to-optimize-the-loading-experience-on-your-webflow-site

Memberscripts needed: 

https://www.memberstack.com/scripts/23-skeleton-screens-content-loaders

Tutorial:

Cloneable: 

Why/Use Cases -

1. Keep your site visitors more engaged until the content loads.
2. Improve your site’s UX by making load times seem shorter.

Adding content loaders to your Webflow site

Speedy loading times are essential for a good user experience and they help keep your bounce rate as low as possible. Fortunately, the mere illusion of speed can be enough to provide that better UX and lower your bounce rate.

We can create that illusion using skeleton screens, or content loaders – visual indicators that content is loading.

Skeleton screens indicate that something is loading and this keeps visitors more engaged for that extra second or two that’s needed for the content to load.

You likely won’t want to use these on static elements which load instantly, but you will likely benefit from using them on web app related elements that take a bit longer to load.

In order to set this up, we’re going to use MemberScript #23 – Skeleton Screens / Content Loaders. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting up the loading animations

All you need to do is choose which elements you want to show loading animations for and add this attribute to them:

·  ms-code-skeleton=”VALUE” – for the value, input the time in milliseconds that the animation will play for

Ensuring everything looks good

The loading animation is just an overlay that spans the height of the box you see around elements in Webflow once you hover over them.

This means that if you have a string of text that contains letters like g, j, p, q, or y, you’ll need to make sure that they don’t extend beyond the text’s line height and beyond the overlay.

Keep in mind when adding a loading animation to text to set its line height accordingly.

Alternatively, you can also just add padding to your text elements.

Another thing to keep in mind is that this loading animation will only work on text blocks and div blocks. If you want to add it to an image, you’ll need to put the image inside a div block and then add the skeleton attribute to the div block.

Then you’ll want to add some padding to the div block of at least 1px. If you don’t, a very thin border will still be visible beyond the overlay.

Making it work

After you’ve added and configured everything, all you need to do is add the MemberScript #23 custom code to your page, before the closing body tag.

We have two versions of the code available – one for dark backgrounds and one for light backgrounds and you can choose whichever is more appropriate for your site.

Conclusion

That’s it, go ahead and publish your site and check out the new loading animations.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Take me to Cloneable!‍