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.
<!DOCTYPE html>
<html>
<head>
<title>Loading Split</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="code.js"></script>
</head>
<body>
*** STEP 2 HERE
</body>
</html>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.
<h1>Something</h1>
<p>Something more.</p>
<div data-loading>
<span> <span></span> </span>
<span> <span></span> </span>
</div>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.
window.addEventListener("load", function(){
var node = document.querySelector("[data-loading]");
node.setAttribute("data-loading","complete");
});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.
[data-loading]{
position: fixed;
display: block;
width: 100vw;
top: 0;
left: 0;
height: 100vh; }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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
[data-loading] > *{
display: block;
position: absolute;
width: 50vw;
height: 100vh;
overflow: hidden;
}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.
[data-loading] > *:first-child{
top: 0;
left: 0;
background: black;
}
[data-loading] > *:last-child{
bottom: 0;
right: 0;
transform: rotate(180deg);
background: red;
}
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.
[data-loading] > * > *{
display: block;
position: absolute;
width: 10vh;
height: 10vh;
top: 45vh;
right: 0;
background: red;
}
[data-loading] > *:last-child > *{
background: black;
}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.
[data-loading="complete"]{
animation: close 0s forwards;
animation-delay: 3s;
}
[data-loading="complete"] > *{
animation: open 1s forwards;
animation-delay: 2s;
}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.
@keyframes open{
from{ height: 100vh; }
to{ height: 0;}
}
@keyframes close{
to{ z-index: -100;}
}This article originally appeared in Web Designer magazine. Subscribe here.
Remember - always think of the user
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:
