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
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.
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
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
Understanding the CSS display property5 tips for super-fast CSS10 great CSS animation resources