Conversion Optimization, Email Marketing & User Experience Tips

Loading Screen with Popup Maker

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!

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:

Loading Screen 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.

Enabling Default Click Functionality

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.

Forced Interaction Extension with Loading Screen

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:

Loading Screen Display Settings

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:

Rough Draft Loading Screen

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:

Loading Screen Theme Edits

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

Loading Screen Font Style

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:

Popup Content Code (Text Tab)

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.

Loading Popup Cookie Trigger

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.

Content writer, WP Implementer, slice fixer.

Follow Walter on:

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.

Follow Us On:

14 Comments

  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?

    Thanks
    Ryan

    • 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

        Hi,

         

        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?

    Thanks

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

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

      Thanks

  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.