A javascript preloader animation

JavaScript
1

Hi,

I have got a problem, that my for-loop is faster then my setTimeout function. I do not know, how to fix this. May by some one can help me?

My animation should be look like this:

new_svg

Here is my javascript:

addEventListener("load", () => {

  const loaderBackground = document.getElementById("loader-background");
  const loader = document.getElementById("loader");
  const loader2 = document.getElementById("loader-2");
  const loader3 = document.getElementById("loader-3");


  if (loaderBackground && loader && loader2 && loader3) {

    if (location.pathname === "/de/" || location.pathname === "/en/") {

      for (let i = 0; i <= 2; i++) {

        loader.style.opacity = "1";

        setTimeout(() => {
          loader2.style.opacity = "1";
        }, 1000);


        setTimeout(() => {
          loader3.style.opacity = "1";
        }, 2000);

        console.log(i);   

        loader.style.display.opacity = 0;
        loader2.style.display.opacity = 0;
        loader3.style.display.opacity = 0;

      }
    }

My gif looks so ugly, that is why I use the svg with javascript.

Thanks for help :wink:

2

Could you explain how did you intend the code to work?

3

On my homepage it should load at least twice or more(two orbits). On all other pages as fast it can be.

For example.. First loader no delay, second loader 1 sec delay and third loader 2 sec delay. And the whole animation should repeat, like the gif, but only on the homepage.

4

So what would be needed to change the current code to that description?

5

I have got a for loop now, but it is not working as expected. The for loop is too fast for setTimeout function.

At the moment the animation runs only once and not infinite. I need something that repeats the animation and it should show and hide. Like the gif animation in the top post.

I have found a setInterval and clearInterval function, but do not know how to use them.

6

Can you explain this a bit more?

Did you try looking up the docs or examples? You can look for “How to use setInterval and clearInterval”

7

Edit: css “display” is too much..

The for loop is at the end before the setTimeout function is finished. Hard to explain. Here is what i have found on search:

Using setTimeout inside a for loop can lead to unexpected behavior because the loop completes before the timeout functions execute. To achieve a delay between each iteration, you can use a closure or pass the loop index as a parameter to the timeout function.

My try:

setInterval(() => {
        loader.style.opacity = "1";
      }, 500);

        setTimeout(() => {
          setInterval(() => {
            loader2.style.opacity = "1"; 
          }, 500);
        }, 1000);


        setTimeout(() => {
          setInterval(() => {
            loader3.style.opacity = "1"; 
          }, 500);
        }, 2000); 

        loader.style.opacity = 0;
        loader2.style.opacity = 0;
        loader3.style.opacity = 0;

In this code setInterval is not working and I do not know how to clearInterval. And some how I have to set the opacity..

8

Did you try searching for “how to clearInterval” ?

I’m not sure why you have so many nested intervals and timeouts. Choose one, try to keep it simple.

Do you want to run some code once after a delay? setTimeout
Do you want to run some code periodically at set intervals of time? setInterval

Is there a reason you want to mix them together like this?

Use console.log() so you can see when each block of code is firing to debug.

9

I did it like this now, but it looks ugly :smiley:

addEventListener("load", () => {

  /* Hide Preloader */
  const loaderBackground = document.getElementById("loader-background");
  const loader = document.getElementById("loader");
  const loader2 = document.getElementById("loader-2");
  const loader3 = document.getElementById("loader-3");

  // If the loader is present, hide it after a delay
  if (loaderBackground && loader && loader2 && loader3) {

    // If on homepage, delay hiding for seconds
    // Otherwise, hide immediately
    if (location.pathname === "/de/" || location.pathname === "/en/") {

        let countdown = 0; // Starting countdown value

        // Start the interval
        const timer = setInterval(() => {

          loader.style.opacity = "1";
          
          if (countdown >= 2) {
              loader2.style.opacity = "1";
          }

          if (countdown >= 3) {
              loader3.style.opacity = "1";
          }

          if (countdown >= 4) {
            loader.style.opacity = "0";
            loader2.style.opacity = "0";
            loader3.style.opacity = "0";
          }

          if (countdown >= 5){
            loader.style.opacity = "1";
          }

          if(countdown >= 6) {
            loader2.style.opacity = "1";
          }

          if(countdown >= 7) {
            loader3.style.opacity = "1";
          }

          countdown++;

          // Stop the interval
          if (countdown > 8) {
              loaderBackground.style.display = "none";
              loader.style.display = "none";
              loader2.style.display = "none";
              loader3.style.display = "none";

              clearInterval(timer);
          }
        }, 750); // Executes every 1000 milliseconds (1 second)
      } else {
        loaderBackground.style.display = "none";
      }
  };
});

May be someone has a better solution for this..

1 Like
10

Does it work? Congrats!

What’s ugly about it?

Please do not share AI generated content on this forum.

11

There are so many if statements.. :stuck_out_tongue:

Yeah is a bit from duckduckgo. Did not know about it, how do you know? From the comments in the code , or how?

12

How many if statements should there be?

13

I do not know exactly how much, but I am repeating myself here:

14

How could you condense those into a single if statement?