Creating an animated loading screen – Interactions tutorial

A step-by-step tutorial about creating an animated loading screen with Pinegrow Interactions.

Loading screens (page overlays that cover the page while it is loading) are often the worst offenders of web accessibility – making the page useless is something goes wrong or if the Javascript is disabled.

The Loading screen that we will design in this tutorials is not one of them. It follows the best design practices of Pinegrow Interactions that make sure that animated elements are shown or hidden only if interactions can actually run.

Before we start

What you’ll learn?

By following this tutorial you will learn how to:

Create the HTML layout and CSS styling for the loading screen
Display the loading screen when the page starts loading
Hide the screen when the page is loaded
Create custom loading animation

What you’ll need?

Of course, you can just watch the tutorial to see how Pinegrow Interactions work. But we recommend that you follow along the tutorial, doing all the steps on the provided landing page. To do that, you’ll need:

Pinegrow Web Editor, either a free trial or activated license that includes Pinegrow Interactions.
Download the example website project without interactions. Unzip the file and open it as a project in Pinegrow Web Editor.
You can also download the finished project as a reference.

If you already have Pinegrow Web Editor, but don’t have the Interactions add-on you can start a trial in Support -> Purchase & Activate under Add-ons: Interactions.

Tips & Tricks

You can copy paste code snippets that are mentioned in the videos from this page.

Use your browser’s Developer tools to simulate loading the page at slower network speed so that you can observe how the preloader works.

Want to know more about Pinegrow Interactions?

Visit the Pinegrow Interactions Documentation portal to learn more about Interactions, actions, licensing, API and more.

Need help?

Post any questions and feedback about this tutorial to a dedicated Pinegrow Forum topic.

Watch the whole tutorial

The tutorial has 4 parts, total length is around 20 minutes.

We recommend that you watch the whole tutorial and follow along with the provided project.

Alternatively, you can scroll down past the video to watch and read transcripts of individual tutorial parts.

The following section contains the videos and transcripts of individual parts of the tutorial:

1. Introduction

Hi, in this tutorial we will show how we can add a preloader to our website with Pinegrow Interactions. We will be coming out with more examples of ways to add interesting interactions using Pinegrow Interactions, a GreenSock powered visual editor for web interactions in the future.

For this tutorial I’ll show you 2 preloaders. The first will be a simple preloader and in the second I’ll show you how to do a more advanced preloader. I’ll cover all the HTML, CSS and interactions for both.

We can use any base page, but we have prepared a sample page that we will be working on.

If you wish you can download the starter webpage without the interactions and follow along with this tutorial. The link is provided in the video description.

You can check how the final preloader looks. It will have 3 square dots animating until the page loads.

So let’s get started!

Open the starter project and begin building amazing interactions with Pinegrow Web Editor.

2. Create the HTML layout and style it with CSS

We’ve a sample page here but you can add this to any page, so let’s add a layout for our preloader.

We will keep the preloader block as the first element inside the body tag. So let’s add a DIV element for our Preloader block.

Go to Tree panel and right-click on the Body element
A popup menu should appear
Go to Insert > Grouping Elements > and click on DIV

You can also insert any elements from the Elements Library panel on the left. Or you can always manually write your code.

Let’s add a class to this element.

Click P on keyboard, the shortcut for opening element’s properties
Click on Add Class
Type a class name, here I’m setting it to site-preloader
Click on Add class button or just hit enter

Now you can close these 2 popups by just pressing Esc key on your keyboard.

Before adding more elements, let’s add some CSS styling to this element.

Select the .site-preloader DIV and go to the Style (CSS) panel.

On the style panel type class name .site-preloader and click on Create

Now you can add CSS properties to the element by clicking on the plus sign.

You do have the freedom to use a code editor to manually type your CSS.

For the usage our preloader block should cover the whole view, until the page content is loaded. So let’s add following CSS:

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background: #cccccc;
z-index: 9999999;

Now you should see a grey block covering the whole page. This should be hidden at first, for the browser that doesn’t support JS. And later it will be controlled by our interactions. So let’s hide this block by adding 2 more CSS rules.

opacity: 0;
visibility: hidden;

Our .site-preloader block is not visible right now. We need to work more on this so for now let’s keep it visible by disabling the above 2 CSS rules by commenting them out.

To disable a CSS properties:

With the DIV selected
Go to the Style panel
Go to the desired CSS property, here first go to opacity: 0
Hover over to far right side and you should see an eye icon
Click on the eye icon

Do the same with the visibility: hidden rule

here first go to visibility: hidden
Hover over to far right side
Click on the eye icon

Now let’s add more elements to the .site-preloader block. I’ll be adding a DIV inside this block with a class name .preloader-content where I’ll add text. This time I will use the code editor to add HTML.

Click on the .site-preloader and click Ctrl + H on PC or CMD + H for mac and Linux, this will popup a code editor for the selected block only. Now let’s add the following HTML inside the .site-preloader block.

<div class="preloader-content">
    <p>Loading...</p>
</div>

Press Esc key to close the popup and save your project.

Now let’s add CSS to the .preloader-content block so that we can center the content. We can also use absolute positioning but I’m going to use flex box properties which provide more flexibility. For this one let’s add CSS directly to the style.css file.

If you already have opened the style.css file in the editor that is fine. If not

Go to the Style tab
Click on Stylesheets
Click on code icon to the right of style.css

Now go to the editor and at the end add our CSS.

.preloader-content {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

Now if you check the Style tab by selecting the .preloader-content on the Tree panel, you can find the same CSS applied.

Now we’ve created a very basic loading screen. So let’s add interaction to make it work like a website preloader.

3. Add simple loading interaction

Our .site-preloader block should be hidden by default, you may remember we have disabled 2 CSS rules which normally hide the .site-preloader block.

Now let’s enable those rules.

Go to the Tree panel
Click on the .site-preloader element
Go to Style tab
Click on the eye icon on those 2 disabled CSS properties

Our .site-preloader block should be hidden, now we will control this with Pinegrow Interactions. We will add interaction to this block so keep it selected and go to the Interaction panel. If you see the Activate Interaction button, click on it.

This block should be visible as we load the website so first we should add Show At Start from the Actions list.

Now if we load the site it will show the preloader block. Now we have to add an interaction to hide the preloader block when the whole page is loaded.

Keep the .site-preloader selected on Tree panel
Select Interactions from the Actions list
Interaction 1 settings should appear
On Trigger > go to Page Load > select Load – Page fully loaded
On Target we can leave it blank, by default it selects current element
On Animation > select Custom Animation, now Timeline Editor should appear

On the Timeline Editor add new transition by clicking on the blank area, a blue transition bar should appear

Click on the Transition bar
Type should be kept as Tween
For Position enter 0
For Duration keep it as 0.5
Click on Add property > go to Opacity > select Auto Opacity
For Auto Opacity field enter 0

Now the .site-preloader block is hidden but we cannot click on the elements below it, because this block is on the top of everything. You check the page in a browser, press CTRL + B on PC or CMD + B for Mac and Linux to preview the page in your default browser. And if you try to select or drag the image, you won’t be able to do that.

Let’s switch back to the Pinegrow Website Builder.

So let’s add another transition at the end of the interaction to completely hide the element.

Click on the blank area inside the Timeline Editor
Click on the blue Transition bar
For type select Set
For Position enter 0.5
Click on Add Property > go to Not animated CSS > select Display
On Display select none

What this does is at the end of the transition it sets the Auto Opacity to 0 and will set our block on Display: none so that it won’t interfere with any element in our page.

Our basic Preloading interaction has been completed. Press Ctrl + B or CMD + B to preview the page in your browser. Hard refresh the page so that the page will take a little time to load and you can see our preloader in effect. How you accomplish this depends on your browser.

4. Create more advanced loading interaction

For an advanced preloader, we will not use a static text like “loading…” but we will add dots that will animate until the page loads. Now let’s add some more elements to our preloader block so that it will look visually more appealing and interactive.

Let’s make the .site-preloader block visible for a while so that we can see the new changes. First, disable JS so that our Preloader interaction won’t affect our layout. Now as we did before let’s disable those 2 CSS from the .site-preloader block.

On the Tree panel select the .site-preloader div
Go to the Style tab
Below .site-preloader go to Opacity and Visibility
Click on the eye icon for both CSS properties

Now we can see our preloader block. Let’s replace the P element and add some elements inside the .preloader-content block.

On the Tree panel select the .preloader-content and press either Ctrl + H or CMD + H, the code editor should popup. Remove the P element and copy paste the code as below:

<div class="loading-cubes">
    <span></span>
    <span></span>
    <span></span>
</div>

Press the Esc key to close the popup.

Now let’s add the following CSS for our new loading-cubes elements.

Go to style.css on the editor
At the end add following CSS codes

.loading-cubes span {
    height: 15px;
    width: 15px;
    background: #666666;
    display: inline-block;
}

You should see three dark grey cubes, now we are going to animate these three dots for our new preloader.

Our main preloader interaction is already there, which will hide the whole preloader block when the page is fully loaded. So now these cubes should animate until the page loads.

Let’s add a new interaction to the .site-preloader block as we did before.

Go to the Tree panel and select the .site-preloader element
Go to the Interactions panel
Click on Add Interaction at the bottom of Interaction 1 settings, Interaction 2 should appear
On Trigger > select Page Load > Load – Immediately
On Target > go to div.loading-cubes > select .loading-cubes on the popup menu
On Animation select Custom Animation, a timeline editor should appear for Interaction 2
Click on selector on the left > go to span > on the popup select span

We are going to animate all the span elements inside the .loading-cubes block,using this selector we are selecting all three span elements.

On timeline editor click on the blank area to add a new transition
Click on the transition bar
For Type select Set
For Position enter 0
Click on Add property > go to Opacity > select Auto Opacity
For Auto Opacity enter 0

Add another transition, by clicking on the blank area on the timeline editor
Click on the transition bar
Keep Type as Tween
For Position enter 0
For Duration enter 0.5
For Stagger enter 0.3
Click on Add property > go to Opacity > select Auto Opacity
For Auto Opacity enter 1

We have added stagger so that each cube will animate in an interval. Now we need to repeat this animation indefinitely but it should end after the page loads.

In the Interaction 2 settings click on Advanced Options
For Repeat enter -1

Now check the page in your browser and you should see the preloader similar to before but with those animated cubes. It seems our preloader interaction is complete but we have an indefinitely repeating interaction which should be stopped, otherwise it will keep repeating.

You can check on your browser; right click on the page and select Inspect. Now on the Elements tab go to .loading-cubes block and check the span elements. You should see style properties changing even if our preloader block is hidden. Such repeating animation will hit the website performance if it is in larger numbers and it is always best to stop if it is not going to be visible.

Let’s switch to the Pinegrow Web Editor.

Now let’s stop the animation on those cubes as our page fully loads. We already have our first interaction for Page fully loaded so let’s go to Interaction 1

Click on Advanced Options
Enable Stop other animations, the Animations to stop field should appear

This will stop animation as the page fully loads, which is our trigger. By default it will stop all the animations if the Animations to stop field is blank.

To stop our cubes animation only, enter 2 in the Animations to stop field, because it is the second interaction

Now check the page in your browser again. Refresh the page and those changing style properties should stop as the page fully loads.

One final thing we might miss is that we had disabled 2 CSS properties of .site-preloader block. So let’s enable those CSS.

Go to the Tree panel
Click on .site-preloader element
Go to the Style tab
Click on the eye icon on those 2 disabled CSS properties

This is an example of how you can add a preloader to any of your websites and you can also build different types of loading animations, like we did for the cubes.

This concludes our tutorial for making a Website Preloader with Pinegrow Interactions. I hope the video was helpful.

If you’ve any questions please feel free to contact us via email or through the Pinegrow forum.

We will be coming up with more videos related to Pinegrow Interactions and How to videos for creating more interactive animations. So keep watching and following.

Thank you for your time and we will see you in the next video.