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!
by Ahoy
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
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.
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.
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!
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.
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.
How do you change the confirmation text with PopUp Maker?
That would depend on the form plugin used. But generally the confirmation goes into the form settings.
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
Yeah please, wanting that but can´t figure how to.
Thanks
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?
Any of the above would work fine. Whichever you choose really.
How do you do this? Is there a detailed step by step to do this?
@Vem – I think you mean page 2 and 3 of this lengthy and completely detailed step by step guide that you commented on 😉