Loading Screen Guide 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!

3 Responses

  1. Author’s Gravatar

    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

    1. Author’s Gravatar

      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.

    2. Author’s Gravatar

      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.

Leave a Reply

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