#14 - Create Loading State On Click v0.1

Simulate a custom loading state when an element is clicked.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #14 v0.1 💙 CREATE LOADING STATE ON CLICK -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous" ></script>
<script>
$(document).ready(function() {

    // Bind click event to elements with ms-code-loading-trigger attribute
    $(document).on('click', '[ms-code-loading-trigger]', function() {
        // Get the value of ms-code-loading-trigger attribute
        var triggerValue = $(this).attr("ms-code-loading-trigger");

        // Find the matching loading element
        var loadingElement = $("[ms-code-loading-element='" + triggerValue + "']");
        
        // Find the matching subject element
        var subjectElement = $("[ms-code-loading-subject='" + triggerValue + "']");

        // Show the loading element (with flex display), append it to the subject element
        loadingElement.css('display', 'flex').appendTo(subjectElement);

        // After 5 seconds (5000 milliseconds), hide the loading element
        setTimeout(function() {
            loadingElement.hide();
        }, 5000);
    });
});
</script>

Description

Attribute

No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Display a Custom Loading Animation

Memberscripts needed

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

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/delete-update-js-items

Why/When would need to Display a Custom Loading Animation?

Improving User Experience: They provide a visual cue that something is happening, especially important during longer loading times.
Branding: Custom animations can be tailored to match your brand's style and personality.
Feedback for User Actions: Useful in forms, submissions, or any process that requires a wait time, reassuring users that their action is being processed.
Enhancing Aesthetics: They add a creative and polished look to your site, making it stand out.
Reducing Perceived Wait Times: A well-designed animation can make a wait seem shorter than it actually is.

Why Use Custom Loading Animations?

Custom loading animations are a simple way to up your user experience game. They let users know something is happening and can be a fun way to brand an interaction. Loading animations can even improve retention by reducing perceived wait times.

Implementing a Custom Loading Animation in Webflow

To add this feature, we’ll use a MemberScript. The script will display a custom loading animation for a fixed duration when users interact with specific elements on your site.

1. Choosing or Creating Your Animation

First, decide on the style of your loading animation. It should align with your website's design and brand identity. You can either source an animation from somewhere like LottieFiles, or create your own. If you’re creating your own animation for Webflow, you’ll find the most support and documentation for Lottie JSON files. Once you have your animation, upload it to your Webflow assets and include it on the page where you’d like it displayed.

2. Configuring Your Animation’s Display

Once your animation is ready, add MemberScript #14 - Create Loading State on Click by following the script’s tutorial. Don’t forget to adjust how long your animation displays at the end of the script if appropriate.

3. (Optional) Repeat!

Our MemberScript supports multiple triggers per animation and multiple animations on a page. Feel free to get creative by adding different animations for different user actions and reusing animations across actions.

Conclusion

A custom loading animation is more than just a visual element. It can be a simple yet effective way to improve user experience. By following these steps and using the MemberScript, you can create a more engaging and visually appealing website with Webflow.

Check out the cloneable if you’d like to work with the example in MemberScript #14’s tutorial! It uses custom loading animations on the “Success” page when items are added or removed.

‍

Take me to the Scripts

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

Read full documentation

Button Text

Something not working as expected?