Website Preloader GIF Image

Add a website preloader with a GIF in 4 simple steps

October 28, 2016

1. Add the website preloader HTML.

The first step is to add the website preloader html from the box below.

You should add the code immediately after the opening body tag as this code needs to run prior to other html elements on the page.

2. Add the website loader css.

The next step is to reference the html by adding the css. Of course this bit you can style yourself to suit your needs, but the following styling is responsive and places the preloader in the center of the screen.

3. Add your GIF as a background image.

As you have probably noticed in step 2, you must add the directory of the GIF you wish to use for the preloader. To get you setup to go I have attached a very basic and simple GIF below, but feel free to swap it out with one of your own or one you may have purchased.

free-website-preloader

4. Add the website preloader script.

The final stage to this super easy website preloader installation is adding the javascript to initialize it. Baring in mind you have already a jQuery library attached, simply add the following code right before the closing body tag and reload your website.

And hey presto, you have a nice working preloader on your website, hope you guys enjoy!

Share this post: