In this post we’re going to create preloader for your website.
Preloader is used to show some animation or text before your whole website become ready. I know, you already have seen many websites where you see an animation going on the middle of the page till the whole page get loads properly for the first time or whenever you refresh the page. Then you see that animation on the middle of the page disappears. So that is called the Preloader.
Preview
This is the result, you will get at the end.
See the Pen
Simple Preloader with Html and CSS by SLICEmyPAGE (@slicemypage)
on CodePen.
Html
Just add this html in your page wherever you want but we suggest this to keep just after opening the body tag.
<div class="main-loader">
<span class="loader1"></span>
<span class="loader2"></span>
<span class="loader3"></span>
</div>
Css
Now add this css into your css file and see the preview.
body{
background:#111a28
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(0.2, 0.2, 0.2);
transform: scale3d(0.2, 0.2, 0.2);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(0.2, 0.2, 0.2);
transform: scale3d(0.2, 0.2, 0.2);
}
}
@-webkit-keyframes pulse2 {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
}
}
@keyframes pulse2 {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes pulse3 {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
}
90% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse3 {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
}
90% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.main-loader{
position: fixed;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
}
.loader1{
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
float: left;
z-index: 9;
position: absolute;
left: 20px;
top: 20px;
-webkit-animation-name: pulse;
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
transform-origin: center;
animation-delay: 0s;
transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loader2{
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
float: left;
z-index: 8;
opacity: 0.7;
position: absolute;
left: 10px;
top: 10px;
-webkit-animation-name: pulse2;
animation-name: pulse2;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0.3s;
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loader3{
width: 60px;
height: 60px;
background-color: #fff;
border-radius: 50%;
float: left;
z-index: 7;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
-webkit-animation-name: pulse3;
animation-name: pulse3;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0.5s;
transform-origin: center;
transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
You have added the html and css and you must see the preview in your website when you visit your website in browser. Now you can use the jQuery to check if the page 100% loaded, so that you can remove the preloader and your visitor can see the website. To do so, just add this jQuery script
jQuery
$(window).load(function(){
$(".main-loader").fadeOut();
});
Video
We have created detail video for this that will show your everything step by step.
Preview
This is the result, you will get at the end.
See the Pen
Simple Preloader with Html and CSS by SLICEmyPAGE (@slicemypage)
on CodePen.
I hope you like this post, if you have any query, please write in comment.
Leave a Reply