Create an animated split screen loading intro

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.

<!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>

<h1>Something</h1>
<p>Something more.</p>
<div data-loading>
  <span> <span></span> </span>
  <span> <span></span> </span>
</div>

window.addEventListener("load", function(){
  var node = document.querySelector("[data-loading]");
  node.setAttribute("data-loading","complete");
});

[data-loading]{
  position: fixed;
  display: block;
  width: 100vw;
  top: 0;
  left: 0;
  height: 100vh; }

[data-loading] > *{
  display: block;
  position: absolute;
  width: 50vw;
  height: 100vh;
  overflow: hidden; 
}

[data-loading] > *:first-child{
  top: 0;
  left: 0;
  background: black;
}
[data-loading] > *:last-child{
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
  background: red; 
}

[data-loading] > * > *{
  display: block;
  position: absolute;
  width: 10vh;
  height: 10vh;
  top: 45vh;
  right: 0;
  background: red;
}
[data-loading] > *:last-child > *{
  background: black;
}

[data-loading="complete"]{
  animation: close 0s forwards;
  animation-delay: 3s;
}
[data-loading="complete"] > *{
  animation: open 1s forwards;
  animation-delay: 2s;
}

@keyframes open{
  from{ height: 100vh; }
  to{ height: 0;}
}
@keyframes close{
  to{ z-index: -100;}
}

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. He has worked on front-end and server-side web applications, having taught himself to code using an Amstrad computer in the 1990s. Leon has written an extensive selection of tutorials on web design for Web Designer Magazine and .Net, as well as introductions to programming concepts for beginners.

Create an animated split screen loading intro

01. Initiate HTML structure

02. Add HTML content

03. JavaScript confirmation

04. Data loading container

05. First level elements

06. Unique positioning

07. Second level children

08. Loading complete

09. Animation definition

Remember - always think of the user

Related articles