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!

Goals

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!

Creating the Loading Screen

As always, create your new popups by navigating to Popup Maker Add Popup. If you haven’t been here before, welcome to the Popup Editor!

Content

For our content, we’re going to have a “loading spinner” in the center of the screen with some fun CSS styles applied to create a cool loading effect – we also want to include some text so that it is absolutely clear to our users that the site is busy populating the search/filter results.

For now, however, we just have some placeholder content:

Triggers and Cookies

The key to making this work with Popup Maker is the “Do not prevent default click functionality” feature located under the Click Trigger creation screen. When you create your click trigger, this box must be checked. By default, it is unchecked.

When the user clicks the button to search our recipe database, the button will now do two things instead of just one: perform the search/filter tasks, and open the loading screen popup. Both of these things will not happen as they should if the default click functionality feature is not checked.

We want this popup to have 100% uptime, so we won’t be setting any cookies.

Forced Interaction

To make sure the loading screen has the appearance and behavior we’re going after, we going to use the Forced Interaction Extension to disable and and hide the close button – we want the user to see only the loading image while the results are populated, and nothing else.

Display Settings

For the Display Settings, you have many options here to customize your loading screen to suit your needs. The main aesthetic point, for us, is simply making sure our loading image and text to appear in the top center of the screen. As such, we set our popup to “Small” and set the position to Top Center with a top margin of 75 pixels.

Again, you can customize these settings as you see fit for your situation, there are no absolute requirements here.

Here’s what our Display Settings look like:

Publish

We can leave everything else in the Popup Editor as it is – no more changes are necessary.

Click Trigger on the Front End

Our search/filter button is going to be a link that will execute the search and/or filter, so we have to trigger this popup by attaching the popmake-ID to the button as a class. This way, the button will perform the two tasks as described above.

Here’s what the code should look like:

You can read more about setting up Click Triggers here.

Here’s what our loading screen looks like so far:

Pizazzin’ It Up

This is our default popup theme for the Playground site, and it’s simply not going to do for this cool loading screen! As always, we’re taking it to the next level with a newly created theme.

Theme

Our loading screen is only going to contain the loading spinner with some CSS, some text, and the popup overlay. As such, the first thing we’re going to change for the popup theme itself is making the popup container completely transparent:

Second, we’ll make sure our loading text is clean, clear, and easily readable by adjusting the applicable styles as seen here:

Text and Loading Spinner

For this example, we really wanted to do something simple and clean.

Text

The text needs to match our recipe site idea, and be short, to be most effective. We decided to go with something like:

“Squeezing oranges” – that seems okay, who doesn’t like a little OJ anyways?

Loading Spinner

This is where the real magic happens, as we’re going to use CSS to create our loading spinner and give it some CSS animations.

The Necessary HTML

To get this working properly, you’ll need to create some divs and things using HTML in the Text Tab of the WYSIWIG Popup Editor. Here is the HTML code:

Our loading spinner includes some slick moving vertical bars, which are displayed here as divs with a class of “rect#”. Each rectangle moves independently, and that is why we have to have a div for each one. Here’s what my text tab looks like in the Popup Editor:

To create the cool “loading” animations, we use this CSS – again, the rectangles move independently, so we have to make the CSS animations for each one. The small differences in “animation-delay” time is what gives it that “wave” effect:

There are tons of spinners and corresponding code you can find out there on your Googler machine – we found this wonderful site in two seconds: Spin Kit by Tobias – enjoy!

Refining the Loading Popup Behavior

Since the popup opens automatically once we click the hyperlink, the last thing we need to cover is making sure the popup opens immediately on the next page until the page is done loading – a true zero second delay. At this point, the popup just goes away once you hit the next page, making it relatively pointless.

To achieve this effect, we simply add this custom JavaScript to your site. If you’re not sure how to add the code, check out our Getting Started with Custom JavaScript document.

Popup ID Number

Find your Popup ID Number in the “All Popups” screen in the WordPress Admin.

Cookie Name

In the Popup Editor, you’ll want to setup your cookie just like it is shown in the below screen shot. You can use a different cookie name if you wish, just make sure to change it in the code above.

Since we’re using the cookie as a “pseudo” trigger to achieve that zero delay loading effect, we don’t have to worry about attaching the cookie to any triggers.

The main thing to understand with this code is that we’re using the cookie to trigger the popup, which is very different from the norm. But, it does go to show you the power of using cookies. Basically, what this code says is that if the cookie exists, display the popup.

Close Delay

This is the time, measured in milliseconds, before the popup will close. Keep in mind, this timer won’t start until the page is completely finished loading. So, if you set the value to “1000” (1 second), then the popup will persist for one full second after the page is completely done loading.

Once you add that JavaScript snippet to your site and edit it to your liking, plus setup the cookie, you’re all done – happy pizazzin’ out there!

Final Product Vid

See the Live Demo

Check it out on our Playground site.