How can I add a custom pre-loader to the Motion Theme?

[Ben_10]

Hi All,

I really want to add a pre-loader to my website and that it acts like what it should do - load videos/images etc in the background before revealing the website, currently I do not see setting for pre-loaders on Motion Theme. I do not want to do this through an application, I am looking for the code and if you can please explain where to paste it exactly. I am also looking for the pre-loader to do the following -

1. It needs to load the full gif video I have (4 seconds), no matter their internet speed, it must finish one full loop, basically the full 4 seconds of the gif and then enter the website.
2. I only want it on the landing, not every-time they click pages or scroll through the website, simply the beginning or let's say the home page only when they type in the website url and every-time they click the home button.

I have already looked out there and found many things on pre-loaders but nothing that works really, I have not found anything on this matter relating to specifically the motion theme, which is made for lots of videos, the pre-loader I have also heavily relates to the Brand so we really think it is necessary to have this. Any assistance is highly appreciated.