Creating an animated loading screen – Interactions tutorial | Pinegrow Web Editor
Home/ Tutorials/ Creating an animated loading screen – Interactions tutorial

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:

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.



Last updated on June 17, 2020 at 6:26 am



Print this article