With CSS animation becoming so powerful you can create great looking and simple pre-loaders for your website.
They can be super simple, elegant and a neat way to add a bit of personality into your overall experience. Additionally, they do look nice and provide a great transition within your site if something is loading. In this tutorial we will go over how to create a pre-loader step by step; there is not a lot of code here but I will assume you know very little about this and explain the code to you in greater detail.
Setting up the HTML
This pre-loader we will be making is just five rectangles that will extend in height. Take a look at the gif above to get an idea for it. But before we get to this we need to start with the HTML markup. It’s very simple.
[html]<div class="pre-loader">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
[/html]
As you can see above we have one div containing the various boxes; its job is just to be a container. Then we have individual boxes. Those will be the light gray pre-loader.
Adding in the CSS
What we need to do next is style them so that they look like rectangles. The below CSS will do just that.
[css].pre-loader {
margin: 200px auto;
width: 66px;
height: 50px;
}
.pre-loader > div {
background-color: #34495e;
height: 100%;
width: 10px;
display: inline-block;
}[/css]
The above CSS is easy to follow. First, we define the overall container to be centered and specify the size. The 66px makes sure the content is flush width wise. Then we say that each div in the pre-loader class is displayed side-by-side, and other visual markers. You should get the following image.
Setting up a Keyframe Animation
What we are going to do next is add the CSS animation that will basically shrink the boxes. First, we need to create a keyframe function.
What is a Keyframe Animation?
If you are unfamiliar with keyframes in CSS let me go over them really quickly. If you are familiar, go ahead and skip this. To fully understand keyframes checkout the write up by W3schools on keyframes. The gist of it is that first you create a keyframe then you indicate when something should happen within the animation based on percentage. If you don’t want anything to happen at say 35% of the animation you leave it out. But if you want to change the top location of your element to 25% or 50% you simply state what you want to occur like in the example below.
[css]@keyframes myMove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}[/css]
Creating a Keyframe Animation
[css]@-webkit-keyframes heightChange {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes heightChange {
0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1.0); }
}[/css]
In the above snippet, both of those CSS rules do the same thing. However, one of them is for webkit, which targets Chrome, Safari and Opera. Above, we’ve created an animation called heightChange. It won’t work yet as it’s not being called anywhere, it just is, but only for now.
What this means is that at the beginning (0%), middle (40%) and end (100%) of the animation the rectangle will scale to 0.4 or 40% of its height. The boxes will be at full height (1.0) 20% of the way into the animation. This will give it the effect of going up and down in size.
This keyframe animation is the heart of the whole CSS animation. So let’s wire it up.
Wiring the Animation
Let’s go back to the CSS rule for all the divs within the pre-loader class. I’d like to add a small snippet to it. Take a look below.
[css].pre-loader > div {
background-color: #fff;
height: 100%;
width: 10px;
display: inline-block;
-webkit-animation: heightChange 1s infinite ease-in-out;
animation: heightChange 1s infinite ease-in-out;
}[/css]
Let me explain what the new snippet is saying. Within the animation we want to call the heightChange keyframe – the one we just created. Following that call is more information about how the animation ought to be executed. We are defining the animation to last a total of one second and are telling it to execute infinitely, so it will never stop.
Ease-in-out is how you want the change of properties to animate, it’s referring to the animation-timing-function property. Ease-in-out indicates that the animation has a slow start and a slow end. As the name suggest it’s there to ease in the change between the different heights. If you were to leave this out the animation would look more jarring.
These two lines of code are again the same but one of them is for webkit. That’s because CSS animations are new and some browsers still require the webkit prefix to make the animation happen. Hopefully, soon that will be deprecated but for now we have to deal with duplicate code. If you’re unsure of what you should be prefixing, don’t forget, there is a website for that.
Adding in the Delay
If you run your code you should realize that all the lines beat together in unison like the gif below.
That’s because there is nothing in the CSS to direct the animation to be delayed. In order do that we need add a little bit more CSS to finish off this animation.
[css].pre-loader .box2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.pre-loader .box3 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.pre-loader .box4 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.pre-loader .box5 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}[/css]
The above code basically dictates how much of a delay each individual box should contain. Because the delays are going from the first box to the fifth it will appear as if the animation continues along the boxes. That’s the whole trick to this animation. Change up the delays and you will see that the animation will get screwed up. Also note that the delays are offset by only .1 second from left to right. You can increase it if you want but it will slow down the whole effect. Also, the whole animation is a second all together.
The very last thing I want to point out is because of the nesting we did in the earlier CSS (I’m referring to .pre-loader > div {}) these delays have to be specified in .pre-loader .box2 as it wouldn’t work without the pre-loader class being included there.
Below is a gif of what the final animation should look like.
Conclusion
I hope that this pre-loader will help embellish your website; I also hope that if you are new to CSS animation that this tutorial gave you a good understanding so that you can make other CSS animations on your own now. Happy coding!
