Adding a Preloader Animation to a Jimdo Website

If your website has a lot of content or does not always load quickly, you may be worried about impatient visitors abandoning your website. One solution to this problem is adding a preloader animation that will quickly appear on your website while the content loads in the background.

 

This can be helpful for when someone first arrives at your website as well as when they jump from page to page. A preloader can provide an animation while they wait and then reveal the content all at once with a smooth dissolve effect.

 

 

This tutorial will help you add a simple preloader animation to any Jimdo website and it works in both desktop and mobile versions. See an example of the preloader on this website.

A simple animation can help visitors wait a bit longer for the content.
A simple animation can help visitors wait a bit longer for the content.

Step 1 -  Add HTML code to each page of your website

At the top of the content area of each page of your website, add a Widget/HTML Element and paste in the following code:

 


<div class="se-pre-con"></div>

Step 2 - Find and host an animated spinner gif

The next step is to find or make the animation that you would like to show while your visitors are waiting.

 

Loading.io provides a wonderful free animated gif creator that you can use. Select the color, style and background color. Then when you are happy, click the "Make a Gif" button and it will generate and download the new gif to your computer. 


The easiest way to host the file on your website is probably to make a new hidden page of your website called "assets".  Then add the image as a File Download Element to the new page (this will make sure that you have the full version of the file).  Next, switch to view mode, right-click on the download button and select "Copy Link URL" (it might be phrased differently depending on the browser you are using). 

 

Step 3 - Put the CSS code into Settings > Edit Head

Now go to Settings > Edit Head and paste in this block of code.  Afterward, update the background url in the code with the one that you copied from the previous step.

 


<style type="text/css">

    /* PRELOADER - CSS - requires JavaScript to work */

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con { position: fixed; left: 0px;  top: 0px; width: 100%;  
height: 100%; z-index: 9999; 
background: url(http://LINK_TO_GIF) center no-repeat #fff;}

</style>

Step 4 - Add the JavaScript code to the Edit Head

Finally, copy this JavaScript code snippet to the Settings > Edit Head for your website. You only need the link to jquery and modernizer once per website, so if you have already called either one in your Edit Head before, you can skip that line here.  


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

<script>
        // Wait for window load
        $(window).load(function() {
                // Animate loader off screen
                $(".se-pre-con").fadeOut("slow");;
        });
</script>