Preloader with static delay in JS function

Question

Fala Galera!

I can’t seem to get my preloader function correctly, because even declaring in the function the delay via setTimeout is not executed. At the same time, my fadeOut is not respecting the time I set, skipping direct and no effect to the application start page.

I need it to run independent of the site loading time for 6 second(gif exec time).

(is an angular application, feel free to indicate native solutions from the angular as well)

Thanks in advance for the help!!!

<script type="text/javascript">
      window.addEventListener("load", function () {
        setTimeout(function () {
          const loader = document.querySelector(".loader");
          loader.className += " hidden"; // class "loader hidden"
        }, 6000);
      });
    </script>

###  CSS  ###
.loader.hidden {
        animation: fadeOut 4s;
        animation-fill-mode: forwards;
      }

      @keyframes fadeOut {
        100% {
          opacity: 0;
          visibility: hidden;
        }
      }

Answer 1

Galley.

I ended up using a Javascript function even if it fixed my problem.

Considering that I’m in an angular application, page loading always happens the first time I access the application, so this function will be triggered every time any page is reloaded.

Follow below function in JS + html + css

    <script type="text/javascript">
      window.onload = function (){
        window.addEventListener("onload", function () {
            $('.loader').show();
          });
          setTimeout(function(){
            $('.loader').hide();
          }, 6500);}  
    </script>

<!-- html -->

    <div class="loader" id="fadeOut">
          <img src="/assets/loader/loading.gif" />
    </div>

<!-- CSS -->
.loader {
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }