Create an animated split screen loading intro

[Rss Bot 1]

The landing page of any site is what first grabs a user's attention. But an asset-heavy page can take a few seconds to load, and as no one likes to wait, this can have a negative impact on user experience. One option is to add a loading screen – in order to keep up the anticipation you can slowly reveal the content with smart animations. Read on to find out how...

Get the project files to help follow this tutorial.

01. Initiate HTML structure

The first step is to initiate the structure of the HTML document. This consists of the document container, which in turn contains the head and body sections. While the head section is used to load the external CSS and JavaScript, the body section is used to store the content created in step 2.

02. Add HTML content

The webpage content is defined as normal – in this case, a h1 title and paragraph has been placed. The loading screen is inserted as the last element to guarantee it has a z-index above all page content. This element has a 'data-loading' attribute, along with a series of inner span elements to be styled for presentation purposes in later steps.

03. JavaScript confirmation

Create a new file called 'code.js'. Having the HTML change to indicate the completion of the page loading is a handy way to trigger CSS presentation changes. JavaScript is used to apply an event listener to the page window for when loading has completed. This listener changes the value of the 'data-loading' container to 'completed' when the page has loaded.

04. Data loading container

Create a new file called 'styles.css'. This first step of the CSS file initiates the 'data-loading' container. Fixed positioning is used to guarantee that the loading screen is always visible. For the same reason, the position and size is set to cover the full screen visibility to hide any page content. 

05. First level elements

The first level span elements inside the 'data-loading' container are styled to fit the full height and half width of the browser window. Absolute positioning is applied to allow these elements to be placed with pixel co-ordinates. Overflow is set to hidden so that the closing animation hides its inner content.

06. Unique positioning

The left and right side of the loading screen require unique positioning for the effect to work. The first child span element inside the 'data-loading' container is set to be positioned to the top-left corner with a black background. The second span element is positioned from the bottom right with a red background.

07. Second level children

The second level children of the 'data-loading' container are the span elements inside the span elements. These elements are placed for visual effect – appearing as blocks set as the reverse colours of their parent container. Absolute positioning along with the 'vh' measurement unit allow these elements to be positioned in relation to the size of the browser window.

08. Loading complete

The JavaScript 'complete' value applied to the 'data-loading' attribute indicates that the page has completed loading. CSS rules are defined to trigger the required animations when this occurs. The main 'open' animation is set to play over a one second duration and uses 'forwards' play to stop on the last animation frame.

09. Animation definition

The open and close animations are defined using keyframes. The open animation is merely defined as starting from the full window height, then ending at zero height; resulting in elements animating to disappear. The close animation is used to place the 'data-loading' container below the page content – avoiding it becoming an obstruction to user interaction with page content.

This article originally appeared in Web Designer magazine. Subscribe here.

Remember - always think of the user

Generate London 2018 – The conference for web designers

When introducing design elements and fancy effects to a page you always need to think of the user experience. And this is what award-winning freelance front-end UI developer Sara Soueidan will be revealing in her 'Using CSS (and SVG) for the Good of UX' talk at Generate London 2018. 

In her talk she is going to show a wide range of possibilities that CSS offers to improve the overall user experience of your UI, using CSS  (with sprinkles of SVG and JavaScript here and there).

Make sure you don't miss out. Get your ticket now.

Related articles:

• Understanding the CSS display property
• 5 tips for super-fast CSS
• 10 great CSS animation resources

View the full article