How to trigger custom loaders in Webflow

Other use-cases using Memberscript #14

https://www.memberstack.com/blog/how-to-display-a-custom-loading-animation

Memberscripts needed

https://www.memberstack.com/scripts/14-create-loading-state-on-click

Tutorial

Cloneable

Why/Use Cases –

-     Improve the user experience by providing a visual cue that something is happening, especially useful during longer wait times.

-     Custom tailor your loading animations to match your branding.

-     Reduce perceived waiting times.

-     Improve your site’s aesthetic.

Triggering custom loaders in Webflow

Custom loaders are a quick and easy way to improve your site’s UX by providing users with a visual cue that something is happening while they wait for something to load.

This guide will show you how to trigger custom loading animations when users interact with your website.

To trigger a custom loader on your Webflow site, we’re going to use MemberScript #14 – Create Loading State on Click. 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 it up

If you don’t feel like setting everything up yourself, go ahead and use our cloneable to skip this part.

Otherwise, once you’ve created and styled your loading state div, add the following attribute to it:

· ms-code-loading-element=”1”

Now select the trigger for the loading animation (e.g. the button that updates a list) and add these attributes to it:

· ms-code-loading-trigger=”1” – we’re using the same value as above to link the two elements together – you can use whatever value you want as long as it’s the same on both.

Lastly, select the element that houses the loading state and add the following attribute to it:

· ms-code-loading-subject=”1” – again, the same value as above.

Don’t forget to hide the loading state div once you’re done working on it, so it doesn't display by default on your page.

Making it work

Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #14 custom code to your page, before the closing body tag.

One thing you might want to tweak in the custom code is the timeout value toward the bottom. By default, it’s set to 5000 milliseconds and that represents the amount of time that the animation will display for. If that’s too long for your use case, feel free to edit it however you see fit.

Conclusion

That’s everything, you can now go ahead and test your custom loader on your live site.

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

Our demo can help you create a custom loader and trigger it based on user interaction.

Take me to Cloneable!