How to 'delay' website loading and show animated gif / loading bar?

Questions
1

After people submit a quiz (3rd party), they are redirected to a Divhunt Page showing the results. Is there a way to delay the website loading and show a message with gif “analyzing your data” to simulate that the data is being analyzed? And after like 4 seconds the results (i.e. the website) will show?

2

I would suggest you to use the Custom code.

Basically.
1st prepare the Component block with Absolute 9999 0 / 0 / 0 / 0 values to be a cover of your site
2nd insert the images etc to that component and style it your needs
3rd use this custom code js (create the code in code blocks like loader.js or something)
4th add id to the Component block “loading-component”

document.addEventListener("DOMContentLoaded", function () {
    // Get a reference to the loading component div
    var loadingComponent = document.getElementById("loading-component");

    // Show the loading component
    loadingComponent.style.display = "block";

    // Hide it after 4 seconds (4000 milliseconds)
    setTimeout(function () {
        loadingComponent.style.display = "none";
    }, 4000);
});
1 Like
3

Thanks for your suggestion @petrbilek . Questions:

  1. With “components”, you mean creating a real component and not just a container. Correct?

image

  1. Where to put the absolute values “9999 0 / 0 / 0 / 0”? Is it “Position” “Absolute”? If yes, is 9999 supposed to be the top number?

image

  1. How to get the ID of the component? Or is ID = Name of Component?

Many thanks for clarifying,
Stephan

4

Another option is to create a new page with an animation. Then I don’t need components etc. After 3 seconds, it can automatically redirect to a new URL.

Do you think this would be simpler?

5

  1. layers set-up

    image
    image1684×1250 71.9 KB

  2. Add the ID Layer > Settings > ID
    image

  3. Add it to the component to simply re-use
    image

  4. Add the code

    image
    image1679×383 25.9 KB

I have simplified the code:

  // Function to hide the element
        function hideElement() {
            var element = document.getElementById("loading-component");
            element.style.display = "none";
        }

        // Set a timeout to call the hideElement function after 4 seconds (4000 milliseconds)
        setTimeout(hideElement, 4000);
2 Likes
6

By using this, you will have a component which you can style how ever you need and re-use on all pages needed. Just add the component on each of the page :slight_smile:

1 Like
7

Thanks!! Could I also just make a new page (and make it as component) and have an automatic redirect after 3 seconds? Just pushing the user to the final URL. Might seem simpler?

8

Not sure what exactly you would love to achieve?

9

Well, I want the user to get the feeling that we are “processing” his data before showing him the results. Basically, the user is providing us with some data on Jotform Quiz (similar to Typeform). Then, when he clicks “show me my results,” he gets redirected to my homepage. Instead of immediately displaying the results, I believe it would enhance the experience to introduce a slight delay to simulate the data processing required to obtain the results.
Google provided me with this script for an automatic redirect after 5 seconds. I will test it tomorrow. If you have a better option or notice any mistakes, please let me know.

function Redirect() 
    {  
        window.location="http://www.newpage.com"; 
    } 
    setTimeout('Redirect()', 5000);
10

I followed your guidance making a component and hiding it with JS, works well! Thank you, @petrbilek !

1 Like
11

Supa awesome! Glad it works :slight_smile:

1 Like