Yup, it's not a very complex fix and there are many ways to do this. I've done it differently at different times before but this one was the design requirement to one of my projects and here's how I did it -

Step 1: Download an animated GIF loader from Google of your choice. A sample can be found in this link.

Step 2: Create an HTML container for the loader in full page, place it right after opening the body tag -
<div class="fullpage-loader">
<div class="loading-position">
<img src="img/loader.gif" alt="Loading ..."/>
</div>
</div>

Step 3: Write some necessary styles for this loader -
.fullpage-loader {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000000;
display: block;
position: absolute;
}
.loading-position {
top: 40%;
left: 50%;
position: absolute;
}

Try this on your webpage, and see if it fulfills your requirement. Leave your comment if you can teach me better ways to do this.