How would I be able to make a preloader on a webpage like Squarespace

Question

Recently I've been thinking about working on a new website layout, but I've come across lots of inspiration lately, but with no luck of finding how to implement them into my project. One of these problems include preloading an image before allowing the webpage the load exactly like how Squarespace presents their website with a preloaded image of their logo and then a quick transition to their webpage. I tried to look at their source code, but with no luck of finding how they did it or what they used (Jquery?/Javascript?). I have no Idea. I did some research, but most of them consist of "progress bars" which I do not want, I would just like to emulate Squarespace with an image and a nice background then transition into my webpage. Would anyone be willing to demonstrate how to do so? Thank you all in advance.

P.S I am still learning JavaScript and Jquery, but I am just fascinated in how people come up with these implementations.

Here is the website link to make things easier: http://www.squarespace.com/ You can see at the beginning a logo loads before the whole website loads, that's what my question revolves around.

Answer 1

Wanna try this one?

Tutorial site http://jquerybyexample.blogspot.com/2012/06/show-loading-image-while-page-is.html

HTML

<div id="dvLoading"></div>

CSS

#dvLoading{
   background:#000 url(images/loader.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}

JS

<script>
    $(window).load(function(){
       $('#dvLoading').fadeOut(2000);
    });
</script>