How I built it

This is where things diverge based on the design of the loading screen you may want to build. I’ll use mine as an example while trying to keep things general.

Note that this article assumes familiarity with pseudo-elements, CSS animation properties and keyframe animations. If you want a refresher on the latter two, you can find a great one here. And here’s everything you wish to know about pseudo-elements.

Ok, ready?

Getting started

Before deciding to build it with HTML and CSS only, I had a gif version:

Design by Avner Gicelter

It will serve as a useful baseline for our version. As you can see, there are four steps in the animation:

The borders appear one by one. The red, orange, and white rectangles slide in. The rectangles slide back out. The borders disappear.

We only need to build steps 1 and 2. Using animation-direction: alternate; will reverse them and create steps 3 and 4 for us. We’ll also make the animation repeat forever using animation-iteration-count: infinite; .

Let’s start with the basic HTML structure:

<!doctype html>

<html>

<head>

<!-- <link rel="preload"> for CSS, JS, and font files -->

<style type="text/css">

/*

* All the CSS for the loader

* Minified and vendor prefixed

*/

</style>

</head>

<body>

<div class="loader">

<!-- HTML for the loader -->

</div>

<header />

<main />

<footer />

<!-- Tags for CSS and JS files -->

</body>

</html>

The CSS is embedded in the head and the loader HTML right after the opening body tag. Perhaps there’s a better way to take advantage of the browser’s critical rendering path? If you can see an improvement, please let me know in the comments.

Building the logo itself

Instead of directly analyzing the final version, we’ll try to follow the logical steps one would use to build a similar animation. In my head, that first step was building the logo without any animation.

div.logo serves as the parent square and each rectangle inside is represented by a div.{$color} :

<div class="logo">

<div class="white"></div>

<div class="orange"></div>

<div class="red"></div>

</div>

The red is after the orange which is after the white because, by default, elements are stacked from last to first. Each one is positioned absolutely from the side it will be appearing from (as in left for the red rectangle and bottom for the orange one) and given the appropriate height or width .

In SCSS, we start with:

div.logo {

width: 100px;

height: 100px;

border: 4px solid black;

box-sizing: border-box;

position: relative;

background-color: white; & > div {

position: absolute;

} div.red {

border-right: 4px solid black;

top: 0;

bottom: 0;

left: 0;

width: 27%;

background-color: #EA5664;

} /* Similar code for div.orange and div.white */ }

This is the result:

Animating the border

Still with me? Because here starts the tricky (and interesting) part.

CSS doesn’t allow us to directly animate div.logo ’s border in the way we want. So we must remove the border from the square and find a different way to create it, one that can be animated.

Perhaps if we could break down the borders into pieces and make them appear sequentially? We could do that using two transparent pseudo-elements overlaying the full square.

Each one renders two of the four borders of the square. We can then make every border appear separately by animating each pseudo-element’s width and height from 0% to 100% in sequence.

Let’s try that! We’ll create a static version first. div.logo::before is positioned absolutely at the top left corner of div.logo and will represent its top and right borders. div.logo::after goes to the bottom right and shows the bottom and left borders.

Our SCSS for div.logo now looks like this:

div.logo {

width: 100px;

height: 100px;

box-sizing: border-box;

position: relative;

background-color: white; &::before,

&::after {

z-index: 1;

box-sizing: border-box;

content: '';

position: absolute;

border: 4px solid transparent;

width: 100%;

height: 100%;

} &::before {

top: 0;

left: 0;

border-top-color: black;

border-right-color: black;

} &::after {

bottom: 0;

right: 0;

border-bottom-color: red; // Red for demo purposes only

border-left-color: red;

}

}

And the result:

Next, let’s animate div.logo::before with our first keyframe.

For the initial state, the pseudo elements now have width and height set to 0. We use the keyframe to animate width to 100% and, right after that, height to 100%.

Along with switching the border colors from transparent to black at the right moment, this causes the top and right borders to animate exactly the way we want them to.

The code, including the changes to the pseudo-elements’ initial state:

div.logo {

&::before,

&::after {

/* ... */

width: 0;

height: 0;

animation-timing-function: linear;

} &::before {

/* ... */

animation: border-before 1.5s infinite;

animation-direction: alternate;

}

} @keyframes border-before {

0% {

width: 0;

height: 0;

border-top-color: black;

border-right-color: transparent;

}

24.99% {

border-right-color: transparent;

}

25% {

height: 0;

width: 100%;

border-top-color: black;

border-right-color: black;

}

50%,

100% {

width: 100%;

height: 100%;

border-top-color: black;

border-right-color: black;

}

}

We repeat the same step for div.logo::after without forgetting to adjust the timing and invert width and height . We now have the full border animation:

Animating the rectangles

Finally, we need to animate the rectangles.

The main challenge is that we can’t chain keyframes. We need to schedule each animation to take into account the steps inside all the others. That way, the overall animation will appear sequential. And it can be reversed.

For the border animation, we had simply given 25% of the time to each border. We need to add the rectangles this time. After some trial and error, we choose the following to happen over 1.5 seconds:

0 to 25%: Top and right borders appear 25 to 50%: Bottom and left borders appear 50 to 65%: Red rectangle appears 65 to 80%: Orange rectangle appears 75 to 90%: White rectangle appears

Using the above timeline, we can now write the keyframe to animate our red rectangle’s opacity and width:

div.logo {

div.red {

/* ... */

width: 0;

animation: red 1.5s infinite;

animation-direction: alternate;

}

} @keyframes red {

0%,

50% {

width: 0;

opacity: 0;

}

50.01% {

opacity: 1;

}

65%,

100% {

opacity: 1;

width: 27%;

}

}

We repeat the same steps for the orange and white rectangles and obtain our final result:

Thanks for reading! I’m Julien, front-end engineer at Healthy.io, a digital health startup. If you want any clarifications or think I skipped something important, please let me know and I’ll make sure to fix it.