Search code examples
javascriptjqueryanimated-gif

How to make jQuery loading screen view at least 3 seconds?

I just created my own loading screen with this code:

HTML CODE: <div class="loader"></div>

CSS CODE: .loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url(../Images/page-loader.gif) 50% 50% no-repeat rgb(249,249,249);}

jQuery CODE: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



AND
             $(window).load(function() {
             $(".loader").fadeOut("slow");})

Each time the page loads, the loading screen only displays for a fraction of a second. Im trying to display the loading screen at least 3 seconds. What jQuery code should I add?

Solution

  • use setInterval

    $(window).load(function() {
  setInterval(function() {
    $(".loader").fadeOut("slow")
  }, 3000);
});