Hello, today we will learn how to add a loader to our website ! Loaders have been used for a long time, it has been proven that users are more patient when a loader is present on a website. That's why I propose to set up a loader that will disappear when the whole page is loaded.
First step
First we will set up our HTML :
The
<div>tag with the idcontainerLoaderwill hold the loader (as the name suggests 😉).While the
<div>tag having the classcontainerText, will allow to contain all the content of the page, both text and images
<body>
<div id="containerLoader" class="containerLoader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
<div class="containerText">
<h1>I'm the title</h1>
<p>Your text here</p>
</div>
</body>
Second step
Now we set up our loader, with some CSS.
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #fff;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
You can see the result of the loader animation below :
Third step
Now we will style our page :
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
background: #252525;
color: white;
font-family: "Roboto", sans-serif;
margin: 0 5% 0 5%;
}
.containerText {
display: block;
margin: 0 auto;
width: 900px;
max-width: 90%;
}
.containerText p {
text-align: justify;
}
.containerText h1 {
text-align: center;
}
/* The disappearing animation of the loader */
@keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
display: none;
}
}
.hide {
animation: hide 1s;
animation-iteration-count: 1;
}
/* The loader container */
#containerLoader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: block;
background: black;
}
/* This last piece of code is purely aesthetic and optional. */
::-moz-selection {
background: rgba(255, 255, 255, 0.22);
}
::selection {
background: rgba(255, 255, 255, 0.22);
}
Last step
Finally, we set up our javascript so that the loader disappears once the page is ready to be displayed. Good point for some: we won't use jQuery.
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
document.getElementById("containerLoader").classList.add('hide');
setTimeout(function(){
document.getElementById("containerLoader").style.display = 'none';
}, 1000);
}
};
The result
You can see below the final result of our loader. If the animation is too fast, you can click on the "Rerun" button to restart the animation.
I hope this tutorial will be useful to you, don't hesitate to use it on your website if you wish and to give me your opinion in comments. 👍
Top comments (13)
I have other idea; make your website so fast it doesnt need loader.
But sometimes the user's internet speed are not enough powerful to load quickly your website, so I think a loader are useful in this case.
Yes Pawel, it is a great idea to make the website load fast. Loaders are good for processes that could take a long time such as querying an API or a database for data. I put a loader on one of my websites during the query to two APIs but it only shows for split a second.
Ive read somewhere that if spinner is shown for less than 2 seconds, its better to not show it, because it confuses users. Some applications even show spinners as long as its needed but not less than 2 seconds, to avoid it.
loading.io/css/
Check this site they provide some neat loaders and their code snippets for free
Yes my loader comes from this site, you can also use this site which allows to customize them : wifeo.com/generateur-loader-css-gr...
You could also implement that with gifs i hope?
It is possible, you need to replace the
with an image :
This method is less recommended since gifs take longer to load. 😉
You also need to specify the loading of the gif outside of the loader, else the loader won't display from the beginning :/
Do u find it okay to use setTimeout on your page? I try every time to avoid it.
The setimeout is not there to define the duration of the loader but to coordinate the keyframe animation and the
display : noneanimation in javascript.This has really made my day as a beginner......thank you very much
But you're welcome 😀