# Preloader Code on Every Page

**URL:** <https://forum.wixstudio.com/t/preloader-code-on-every-page/27004>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [November 16, 2020, 1:08am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004 "2020-11-16T01:08:53Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![isabel-z](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/isabel-z/32/24858_2.png) [@isabel-z](https://forum.wixstudio.com/u/isabel-z)\
**Post date:** [November 16, 2020, 1:08am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/1 "2020-11-16T01:08:53Z")

</div>

Hi everyone,

I have created more than 100 websites for my clients and I am having trouble with the preloader code I added to the sites now.

The code I have used for 1 year was working properly on every page. About a few weeks ago I noticed that the preloader code doesn’t work on every page on my clients’ sites. But I haven’t seen a problem with my own sites. Today, when I look at my sites, the code does not work on every page too, it only works once when the site is opened.

It is very strange that the code worked properly a few days ago and now only works on the first page. You can view the code below:

```javascript
<div id="preloader">

</div>

<script type="text/javascript">
  (
 function() {
 var preload = document.getElementById("preloader");
 var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 var loading = 0;
 var id = setInterval(frame, 64);

 function frame() {
 if (loading == 30) {
          clearInterval(id);
         preload.style.display = "none";
        } else {
          loading = loading + 1;
 if (!isMobile) {
 if (loading == 10) {
              document.getElementById("preloader").classList.add('hidden');
              }
          } else if (isMobile)

          {
 if (loading == 14) {
              document.getElementById("preloader").classList.add('hidden');
                }
          }
        }
      }
    })();

</script>

<style>
  #preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: visible;
    background: #FEFCFE url('GIF URL') no-repeat center center;
    display: block;
    opacity: 1;
    transition: 1s opacity ease-in;
  }

  #preloader.hidden {
    opacity: 0;
  }

</style>

```

A must-have feature for my customers and the sites I created is not working now, and it was a very good solution for long loading problems. Can you help me? I am looking forward to your help to talk to people who encounter the same problem or to solve this problem together.

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [November 16, 2020, 11:09am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/2 "2020-11-16T11:09:29Z")

</div>

I want to be sure that I understand. The following option is described in the [documentation](https://support.wix.com/en/article/custom-code-loading-options) :

_ **Reload on every page** _  
_Tracking code is loaded again after every page navigation. This option forces your code to reload every time the user navigates to a new page._

Is this the option that you are using?

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/6/46fa5c271e7bc8316cfa8746b0c7cab9ea08cbf3.png)

If this is the case, let me know and I will report this to QA for evaluation.

---

<div class="post-metadata">

**Author:** ![isabel-z](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/isabel-z/32/24858_2.png) [@isabel-z](https://forum.wixstudio.com/u/isabel-z)\
**Post date:** [November 17, 2020, 9:40am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/3 "2020-11-17T09:40:02Z")

</div>

@yisrael-wix

Hi,

First of all thank you for your interest and understanding.

Wix Corvid is currently rolling out a new performance update. I had no problem about loading the preloader on every new page for any website I created. I think these sites have received this update and there is a problem about Tracking & Tools section because on the New Improvement about Corvid Announcement topic, someone had the same problem as me and the Wix Team solved the problem.

I also wrote on the announcement topic about my problem. I have 2 websites of my own that are important for now. These preloaders need to be fixed because that’s our job.

Websites: www.konutdiyari. com / www.konutdiyariestates. com

Thanks in advance for your help.

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [November 17, 2020, 9:46am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/4 "2020-11-17T09:46:34Z")

</div>

@isabel-z Hey Caroline, I just took a look and it appears that this might be related to the new performance release. Related in two ways: the performance might be so fast that the the preloader does not appear, or that there’s an issue with executing the embedded scripts in tracking/analytics.

Give me minute. I want to change the configuration of your two sites and I’ll be right back.

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [November 17, 2020, 9:53am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/5 "2020-11-17T09:53:29Z")

</div>

OK - I changed the configuration of your sites. Please try again. You might first need to count to 100.

---

<div class="post-metadata">

**Author:** ![70shakeel](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/70shakeel/32/25968_2.png) [@70shakeel](https://forum.wixstudio.com/u/70shakeel)\
**Post date:** [January 8, 2021, 4:36am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/6 "2021-01-08T04:36:59Z")

</div>

Where is this option in my site?

---

<div class="post-metadata">

**Author:** ![Andrian](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/andrian/32/80878_2.png) [@Andrian](https://forum.wixstudio.com/u/Andrian)\
**Post date:** [February 13, 2024, 1:30pm UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/7 "2024-02-13T13:30:25Z")

</div>

Created mine, feel free to use, may not be displayed over the widgets

```javascript
<!DOCTYPE html>
<html>
<head>
    <style>
        /* Preloader Styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div id="preloader">
        <div class="loader"></div>
    </div>

    <script>
        // Function to show the preloader
        function showPreloader() {
            document.getElementById("preloader").style.display = "flex";
        }

        // Function to hide the preloader
        function hidePreloader() {
            document.getElementById("preloader").style.display = "none";
        }

        // Show preloader when a new page starts loading
        window.addEventListener('beforeunload', showPreloader);

        // Hide preloader when the page is fully loaded
        window.addEventListener('load', hidePreloader);
    </script>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![Shree\_Kreations](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/shree_kreations/32/88460_2.png) [@Shree\_Kreations](https://forum.wixstudio.com/u/Shree_Kreations)\
**Post date:** [February 15, 2024, 6:22am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/8 "2024-02-15T06:22:01Z")

</div>

Where to add this code? My developer tools option does not have the code option  
 ![Screenshot 2024-02-15 115142](https://us1.discourse-cdn.com/wix/original/3X/2/f/2f0e6b3ef9ad13a0ab1b0ac65b35f153672d02b1.png)

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [February 15, 2024, 11:40am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/9 "2024-02-15T11:40:18Z")

</div>

Look at —\> SETTINGS

---

<div class="post-metadata">

**Author:** ![Wireless\_Printers](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/wireless_printers/32/104435_2.png) [@Wireless\_Printers](https://forum.wixstudio.com/u/Wireless_Printers)\
**Post date:** [January 29, 2025, 5:04am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/11 "2025-01-29T05:04:45Z")

</div>

Hi

It used to work for a long time and now this happen!  
Any preloader code that I put in on a custom code - It just only load the preloader over and over without disappearing and stuck there without getting or loading to the webpage, is there a problem with wix or the code and how do I fix this?

Need some help. Thanks in advance! Cheers!

CODE:

 #preloader { position: fixed; width: 100%; height: 100%; z-index: 999; overflow: visible; background: #F2F3F5 url('https://static.wixstatic.com/media/\*YOUR\_ANIM\_GIF\_URL\_HERE\*') no-repeat center center; // CHANGE HEX COLOR OR EVEN ADD BACKGROUND IMAGE display: block; opacity: 1; transition: 1s opacity ease-in; } #loopIcon{ width:100%; height:100%; background:url('https://static.wixstatic.com/media/6283c2\_34dbc67b79ee4e949bfaf07d3f52b608~mv2.webp') no-repeat center center; // CHANGE LINK TO GIF FROM MEDIA LIBRARY } #preloader.hidden { opacity: 0; }

---

<div class="post-metadata">

**Author:** ![Wireless\_Printers](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/wireless_printers/32/104435_2.png) [@Wireless\_Printers](https://forum.wixstudio.com/u/Wireless_Printers)\
**Post date:** [January 30, 2025, 4:31pm UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/13 "2025-01-30T16:31:44Z")

</div>

The preloader remains in a loop, never get disappear and never get to the website page, any suggestion on how to fix it?

---

<div class="post-metadata">

**Author:** ![Andrian](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/andrian/32/80878_2.png) [@Andrian](https://forum.wixstudio.com/u/Andrian)\
**Post date:** [February 16, 2025, 12:25am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/14 "2025-02-16T00:25:24Z")

</div>

Sorry for the delayed response, Looks like the code need an update, I will take a look on this and will try to find a solution. Thanks

---

<div class="post-metadata">

**Author:** ![Ellis\_Bennett](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ellis_bennett/32/97842_2.png) [@Ellis\_Bennett](https://forum.wixstudio.com/u/Ellis_Bennett)\
**Post date:** [April 4, 2025, 7:51pm UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/15 "2025-04-04T19:51:38Z")

</div>

> [@Andrian](#):
>
> ```javascript
> <!DOCTYPE html>
> <html>
> <head>
> <style>
> /* Preloader Styles */
> #preloader {
> position: fixed;
> top: 0;
> left: 0;
> width: 100%;
> height: 100%;
> z-index: 9999;
> background: #fff;
> display: flex;
> justify-content: center;
> align-items: center;
> }
> 
> .loader {
> border: 5px solid #f3f3f3;
> border-top: 5px solid #3498db;
> border-radius: 50%;
> width: 50px;
> height: 50px;
> animation: spin 2s linear infinite;
> }
> 
> @keyframes spin {
> 0% { transform: rotate(0deg); }
> 100% { transform: rotate(360deg); }
> }
> </style>
> </head>
> <body>
> <div id="preloader">
> <div class="loader"></div>
> </div>
> 
> <script>
> // Function to show the preloader
> function showPreloader() {
> document.getElementById("preloader").style.display = "flex";
> }
> 
> // Function to hide the preloader
> function hidePreloader() {
> document.getElementById("preloader").style.display = "none";
> }
> 
> // Show preloader when a new page starts loading
> window.addEventListener('beforeunload', showPreloader);
> 
> // Hide preloader when the page is fully loaded
> window.addEventListener('load', hidePreloader);
> </script>
> </body>
> </html>
> 
> ```

Don’t suppose theres any update on this?

---

<div class="post-metadata">

**Author:** ![Andrian](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/andrian/32/80878_2.png) [@Andrian](https://forum.wixstudio.com/u/Andrian)\
**Post date:** [April 8, 2025, 9:30am UTC](https://forum.wixstudio.com/t/preloader-code-on-every-page/27004/17 "2025-04-08T09:30:33Z")

</div>

Sorry for the delay! I made some updates, please try the following one!

```javascript
<!DOCTYPE html>
<html>
<head>
    <style>
        /* Preloader Styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.3s ease;
        }

        .loader {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .fade-out {
            opacity: 0;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="preloader">
        <div class="loader"></div>
    </div>

    <script>
        function showPreloader() {
            const preloader = document.getElementById("preloader");
            console.log("Showing preloader...");
            preloader.style.display = "flex";
            preloader.classList.remove("fade-out");
        }

        function hidePreloader() {
            const preloader = document.getElementById("preloader");
            console.log("Hiding preloader...");
            preloader.classList.add("fade-out");
            setTimeout(() => {
                preloader.style.display = "none";
                console.log("Preloader hidden.");
            }, 300);
        }

        // Handle initial load
        window.addEventListener('DOMContentLoaded', () => {
            console.log("DOMContentLoaded triggered.");
            setTimeout(hidePreloader, 300);
        });

        window.addEventListener('load', () => {
            console.log("Load event triggered.");
            hidePreloader();
        });

        // Intercept link clicks
        document.addEventListener("DOMContentLoaded", () => {
            document.querySelectorAll("a[href]").forEach(link => {
                link.addEventListener("click", function (e) {
                    const href = link.getAttribute("href");

                    // Ignore anchor links and JavaScript triggers
                    if (!href || href.startsWith("#") || href.startsWith("javascript:")) return;

                    e.preventDefault();
                    showPreloader();
                    setTimeout(() => {
                        window.location.href = href;
                    }, 300); // delay gives time for animation
                });
            });
        });
    </script>
</body>
</html>

```