Loading Screen Guide Using Popup Maker

Loading screens can play an important role on your site, and that’s why we’ve created this all inclusive guide on how to get an awesome loading on your site using Popup Maker!

Final Product Vid

See what our finished loading screen looks like in this video clip.


See the Live Demo

Check it out on our Playground site.

Before We Get Started

The only thing we’ll need for this loading screen popup is a way to disable and remove the close button, as we don’t want that gaudy thing showing up on our loading screen. Luckily, our Forced Interaction Extension does just that.

Why Have a Loading Screen?

Let’s pretend we have a database of 1,000,000 recipes, and each recipe has 14 data points such as category, prep time, cook time, ingredients, etc. Our website gives users the ability to find the perfect recipe for any situation.

Our website has many ways to filter and search for results. Inevitably, it’s an intense, process heavy search application that takes a little time to produce the results from the database.

During that waiting period, we must keep our users engaged and entertained!

Where’s the Value?

Creating cool loading screens maybe seems…hardly worth the time?

The History of Pizazz

I had a history teacher back in the day – she would implore us to add “pizazz” to our work – but why? Isn’t it just function that matters in the end anyways – what does “pizazz” do for us? Well, back then, it earned me a flawless grade.

Now, years later, adding pizazz to our work continues to earn us flawless grades – not just amongst our peers, but from our customers as well.

A cool loading screen is just pizazz – nothing more, nothing less – but keeping customers entertained with that pizazz keeps their feet in the door and prevents them from bailing out.

And if we prevent just one abandonment, is that pizazz not valuable enough to be worth the time?

Every user has that breaking point, and we’re here to prevent that from becoming reality. There’s no better way to do that than keeping your user entertained and engaged.

History Repeats Itself

It’s not like this is new – cool loading screens are a staple of video games, for example. Cool loading screens can also be found around the web on various websites of all types – it’s been done because it works.

One of Popup Maker’s customers gave us the idea to begin with, and as always, we’re here to take it to the next level. Now, we’re going to share the process with you in this step-by-step creation guide!


To entertain the customer with our pizazz and keep them engaged until the content is loaded and arrives in full so as to prevent abandonment.

With our preliminary materials done and gone, it’s time to get started!

Pages: 1 2


  1. Ryan on October 31, 2016 at 2:50 pm

    Thanks for the great tutorial!

    Is there a way to automatically make this load on all pages of the site (without a button click) and disable afte the page content has loaded?


    • Daniel Iser on November 1, 2016 at 2:27 pm

      Hey Ryan,

      Short answer yes, we have already updated the live example to do this. We will get this guide updated as soon as we can with the correct code samples needed.

    • Daniel Iser on November 1, 2016 at 2:31 pm

      Hey Ryan,

      Actually look on page 2 of the guide. Looks like @WaltMesser already updated it. The section “Refining the Loading Popup Behavior” should cover that.

      • Álvaro on August 26, 2017 at 8:49 pm



        If you want to make the loading popup appears automatically when you enter at the website how could I configure the cookies?

        The problem there is that the pop up closes automatically when is charged only when you have the cookie “loading-popup”, but the problem is that this cookie is only downloaded in the device at the popup opens.

        With the configuration in the guide, the first time a person enters the site the loading popup is infinite, never closes (because the cookie hasn´t been downloaded, so the JS can´t detect that the page is fully loaded), the client has to refresh the page, and then works well (refreshing the page allows the popup to triggers again, having the cookie downloaded from the previus popup).

        How could I solve that?


        Thanks for the help!

        • Daniel Iser on August 29, 2017 at 12:05 am

          If you followed the guide correctly based on our example you shouldn’t see a loading popup until you transition from one page on your site to another. It shouldn’t appear on the first page load.

          • Álvaro on August 31, 2017 at 7:38 am

            I changed the Trigger to Auto Open, because I want the loading screen for my landing page, so it´s triggered automatically when you enter the site.

  2. Vicki on June 10, 2017 at 5:00 pm

    How do you change the confirmation text with PopUp Maker?

    • Daniel Iser on July 25, 2017 at 8:58 pm

      That would depend on the form plugin used. But generally the confirmation goes into the form settings.

  3. Mike on September 10, 2017 at 8:27 am

    How could I add a loading screen to my site for when people enter the web it appears as loading website, and when the site is fully loaded it disappears and let you access to the web?


    • Jose on October 27, 2017 at 11:27 am

      Yeah please, wanting that but can´t figure how to.


  4. Carl Chapman on December 22, 2017 at 9:40 am

    I know I must be really stupid, but where do I add the custom CSS styling for the loading rectangles? To , my theme’s style.css file? Or is there a place to just add it on the popup theme itself?

    • Daniel Iser on January 4, 2018 at 5:40 pm

      Any of the above would work fine. Whichever you choose really.

  5. Vem Miller on April 17, 2018 at 11:32 pm

    How do you do this? Is there a detailed step by step to do this?

    • Daniel Iser on April 23, 2018 at 10:28 pm

      @Vem – I think you mean page 2 and 3 of this lengthy and completely detailed step by step guide that you commented on 😉

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.