Loading Screen Guide Using Popup Maker
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!
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.
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.
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:
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.
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.
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?
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.
Popup ID Number
Find your Popup ID Number in the “All Popups” screen in the WordPress Admin.
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.
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.
Final Product Vid
See the Live Demo
Join our Facebook Group
We created a Facebook group to better serve the needs of our users.
- Facilitate faster support.
- Pair users who need custom work with qualified developers.
- Get more in touch with our users to make better decisions for the future.