How to Add Preloader to Your Divi Website

In this tutorial, we’ll teach you how to add a preloader to your Divi website. We’ll also point you towards excellent free preloader resources, and show you step by step how to use one on your website!

What is preloader?

A preloader is a usually simple animation which shows up when your website is loading. It can be extremely helpful when a website is complex and its loading time takes a few seconds. So, to keep your visitors interested and to prevent them from getting frustrated with waiting, you should use a preloader.

Why should you get one?

Let’s illustrate what a preloader does with an example. Everyone hates waiting in front of the red traffic light, right? But in some countries, those lights come with timers which show drivers exactly how much time they have to wait for the light to change. It gives them something to look at and reassures them that they won’t be waiting forever.
That’s exactly what a preloader does for your visitors, only in a more entertaining way. It gives them something to look at and reassures them that the website is there, only it can take a couple moments to show up.

Free preloaders up for grabs!

In this tutorial, we are going to show you how to add a preloader to your Divi-based website. We’ll also point you towards excellent free preloaders which you can download and use absolutely for free! You can download the file, choose the preloader you like best, add it to your website – and activate it using the code from this tutorial.
Get yourself a preloader! Make your visitors wait with style!

Flat Style Circle Preloaders (Gif, Aep, PNG)

Flat Style Squared Preloaders (Gif, Aep, PNG)

1

Upload GIF preloader to your website

In first step we need to upload preloader we want to use on our website. Go to Media/Add New and click Select Files. Navigate to the folder with preloaders and select GIF image that will be used for your website. Once the image is uploaded, open it in your Media Library and copy it’s url.

2

Add CSS code

In this step we need to add CSS code that will center our preloader. We can also specify background color for the page when preloader is running and size of our preloader. Don’t forget to change URL of the preloader for your own! To add this CSS go to Divi/Theme Options/Custom CSS

3

Add code to the Head of your blog

In this step we will add javascript code to the Head of our website. It will take care about when preloader shows up and make sure it is faded out once the page is loaded. To do that go to Divi/Theme Options/Integration tab and add the following code to the < head > section:

4

Add code to the Body of your blog

In this step we will add HTML code that will place our preloader on our website. To do that go to Divi/Theme Options/Integration tab and add the following code to the < body > section:

You’re not a tutorial kind of person? That’s OK!

A brand-new awesome plugin Divi Toolbox has just appeared on the Divi market! It has many amazing features which make it easy to create advanced effects on your website without using code. Among its many features, there is also the option to add a preloader. You can choose one from over 10 custom preloaders and customize it further, for example, by changing its size or color. So, if you’d rather get a plugin which will do it all for you, grab yourself the Divi Toolbox!

Find out more →

A preloader won’t make your website faster. It will only let your users know that something is happening. You should still remember about website optimisation to make your website as light as possible, so a preloader will appear only for the shortest time possible.
Maciej Ekstedt

Maciej Ekstedt

Creative Director

Maciej is the founder and CEO of B3 Multimedia Solutions. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company and for his clients. Maciej is fascinated by the phenomenon of megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.

Marvel is a versatile, responsive and high-performance Divi Child Theme with a modern design and functionality.

43 Comments

  1. Andrej

    I have always been wondering how the preloaders are set up. Now I know how to do it. 🙂 Thank you for this tutorial.

    Reply
    • Maciej Ekstedt

      You welcome Andrej 🙂 I’m glad it was helpful!

      Reply
  2. Firmin

    Great tutorial!
    And what about a svg file? Do we need to change something to use it instead of a gif?

    Reply
    • Maciej Ekstedt

      Hi Firmin,
      No, I think this method won’t work with the animated SVG file, where code for animation is used. Sorry 🙂

      Reply
  3. Stephanie Markou

    This is impeccable timing! It’s been on my to-learn radar the past few weeks… thanks for the great tutorial!

    Reply
      • Stephanie Markou

        Hi Maciej, I was just going through it and step 4 is not showing, can you have a quick look? Thanks!

        Reply
        • Maciej Ekstedt

          Thanks for reporting that! Now it’s fixed! Please refresh page Stephanie 🙂 Have a great weekend!

          Reply
          • Stephanie

            Thank you! I got it now 🙂 = Weekend Play Project 🙂 . Cheers~great weekend to you!

  4. Tess

    Great timing for me too! Thank you!
    The preloader only shows on my home page – what do I need to do to show on all pages?

    Reply
    • Maciej Ekstedt

      I think this might be caching issue. Please clear all cahce (browser, server, plugin) and refresh page. It should help.

      Reply
  5. Bastien BERENGUIER

    Hi guys, thanks for this great tutorial !
    Is there a way to choose the page on which we want the preloader to display, and not on the whole website ?

    Reply
      • Bastien BERENGUIER

        Hi thanks for the hint, but I didn’t find how to apply it.
        However, I managed to replicate the effect :
        – I put the js and the div into a code module in the page I wanted the preloader
        – I put the CSS in the page option
        And it works !

        Reply
      • Fudzhay Saidov

        Hi Maciej,

        Where should I add this code? Perhaps in functions.php? And should I delete anything else that you have given us and leave only that one?

        Many thanks,
        Fudzhay

        Reply
        • Maciej Ekstedt

          Hello,

          Please follow the tutorial. You don’t need to edit any files. All code can be added in Divi Theme Options. Hopefully this helps.

          Reply
  6. Viliam

    Works very good! Thank you.

    You should also add information that URL address of preloader have to be inserted in STEP 2 on line 21.

    Reply
    • Maciej Ekstedt

      Thanks Viliam. WIll fix it asap! Have a great day!

      Reply
  7. Lovish Gulati

    Is that possible to add audio with gif. I know gif do not supports audio but is there any way that we can play audio and at the same time gif?

    Reply
  8. Mark Muthii

    Hey Maciej!

    I was able to successfully implement the preloader. Thanks!

    Something else I did was to add a fade-out effect for when someone leaves a page, which matches the fade in effect that the preloader code adds. I would have posted the code here, but Wordfence won’t let me :P… Goes to show how good their security is though!

    Once again, thank you!
    Mark.

    Reply
    • Maciej Ekstedt

      Hi Mark, I’m glad it works for you! You can send the code via email so we might add it to this tutorial 🙂

      Reply
  9. Pierre

    Hi Maciej,
    The preloader works nicely, but since the latest Divi release (3.19.2 or 3.19.3), the VB cannot load in visual mode. I suspect a conflict with the VB preloader. Is there a way to disable the preloader when using Divi VB ?

    Reply
    • Maciej Ekstedt

      Hello Pierre,
      Thank you for reporting that! The tutorial has been updated. We have tweaked the code that is added to < head > in Integration tab. Please amend it and it will work in front-end VB 🙂 Have a great day!

      Reply
    • Maciej Ekstedt

      Hello Victor,

      Have you added the latest code from the tutorial? It should work. Please check step by step if the code you have added is proper and matches tutorials code.

      Reply
  10. Morgan

    Not sure what im doing wrong. Ive copied all the code exactly as it is and deleted the cache, still nothing.

    Reply
  11. Angelo Barzelloni

    Hello,
    great tutorial.
    Works flawlessy in chrome, it does not in firefox (page stays white and nothing happens)
    Any Clue?

    Reply
    • Maciej Ekstedt

      It works fine on Chrome either on Firefox. What version and device are you experiencing issue on? Please make sure you have fallowed each step carefully 🙂 And make sure it is not caching issue Angelo.

      Reply
      • Morgan

        any idea why mine isnt working? I have tried a few times now, still not getting anything. i have the code right, its not doing anything different

        Reply
  12. Jordan Miller

    Hello! Awesome tutorial, I just have one simple question. Is there a way to make the preloader loop a few times to delay the process, my site loads way too fast and you can barely see the preloader gif. I’m using it because in Divi, my hero image has parallax and it jumps when it loads.

    Reply
    • Maciej Ekstedt

      Hello Jordan,

      Have you tried to increase delay value in script? Let’s say to 2000 or 3000?

      Reply
    • Reinoud Zuyderhoff

      I just wanted to add to this:

      I wanted my gif fully finish before you go on to the page. I added a delay tot the .status class as well like this:

      instead of

      jQuery(“.status”)fadeOut();

      it’s now

      jQuery(“.status”).delay(5000).fadeOut();

      That did the trick for me.
      when I did the solution of Maciej, the gif faded out very quickly and the screen stayed blank for a while.

      Maybe I didn’t do the right way, but if it works it works right?

      Felt like sharing it ’cause this was the only blog I could find on this very topic

      Thank you so much Maciej, I really impressed my employer with this, he had been trying to do this for a long time!

      Reply
  13. Asaf Moraz

    Hi.

    Thanks for your guide. It works like a charm!

    The only problem is that on mobiles the loader is not in the middle of the screen.

    My mistake?

    Reply
  14. Jon

    What does Divi use the .et-bfb and .et-fb classes for?

    Reply
    • Maciej Ekstedt

      Hi Jon,

      .et_fb is a front-end builder while .et-bfb is a backend builder. We use the classes in the script to disable preloader when you are in builder. Hopefully this helps 🙂

      Reply
  15. Reinoud Zuyderhoff

    Do you know how to make the pre-loader play only once? I want to use it when entering the home page for the first time. But than when visitors refresh or come back from another page I don’t want them to have to watch it again.
    I’m not using it as a loader but as a small intro for the site.

    Reply
  16. Christie

    Thanks for this! It was beyond easy to use and looks great 🙂

    Reply
  17. Philip

    Hello Maciej!

    Thanks for the great function! Its works fine. I only have on issue with it. Its seems that the loading animation is invisible until everything is loaded into the cache. So the site is white and when the loading animation appears everything fades out because everything is loaded. Is there a way that the loading animation is loaded first ? I am using Mac Safari! Thanks a lot in advanced!

    Reply
  18. Karl Marais

    Thanks, Maciej for the clear step-by-step instructions that are easy to follow. You’re a star!

    Reply
  19. Christian

    Thanks for the great tutorial.

    Just a note that the css for centring the image wasn’t working for me so I changed it to the below. The CSS used in this tutorial is for centring the top left point of the image, so it looks drastically off centre on mobile.

    .preloader .status {
    height: 200px;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    position: absolute;
    top: 50%;
    width: 200px;
    background-image: url(example.gif);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
    }

    Cheers

    Reply
    • Maciej Ekstedt

      Hello Christian,

      This is because you have changed preloader size. If you would use the size we provided in this tutorial, you wouldn’t have to tweak margins to have it centered. Since you have 200px width and height you had to apply negative left and right margins -100px 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest