CODEWITHSUNDEEP
javascriptjqueryhtmlsettimeoutdocument-ready
barnacle.m
barnacle.m

Reputation: 2200

Show loading spinner/overlay BEFORE page elements appear

I would like to show a loading spinner before any of the page elements load, and then load the page elements while the loading overlay is still on. Is this possible? I am using this code but the page still loads elements before the spinner shows up.

$(document).ready(function () {
            setTimeout(function () {
                $.loader.close();

                // Do something after 5 seconds
            }, 3000);
        });

Upvotes: 0

Views: 3865

Answers (1)

GasKa
GasKa

Reputation: 54

 Add the below div right below the opening <body> tag.

 <div class="loader"></div>

 Add some .css

 .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);
  }

 And jquery in header

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(window).load(function() {
 $(".loader").fadeOut("slow");
 })
</script>

At the end, look after a loading gif image. Google is full :)

Upvotes: 1

Related Questions