30 Page Preloading Image Style in Css
In every website we have seen an image preloader in their websites. There is a lot of images we can make as a page preloaded image. Here we are going to make 30 preloaded images using css. It’s very simple to make preloader in our website. We used jQuery for hiding the loading images in this website. You can hide loading image when click the website.
The animations are very easy to customize since they made out of just CSS, you will have to change jQuery code so that it fades out the loading screen once the content loads. I will explain to you how the first example works.
Step 1: HTML
<div id="loading"> <div id="loading-center"> <div id="loading-center-absolute"> <div class="object" id="object_one"></div> <div class="object" id="object_two"></div> <div class="object" id="object_three"></div> <div class="object" id="object_four"></div> <div class="object" id="object_five"></div> <div class="object" id="object_six"></div> <div class="object" id="object_seven"></div> <div class="object" id="object_eight"></div> </div> </div> </div>
This is the loading functionality
<div id="wrapper"> <div id="wrapper-center"> <h1>welcome to home page </h1> </div> </div>
and you can add inner pages with your own content
Step 2: CSS
we have to create a fixed div element that can float above and center spot that always will remain centered.
#loading{
background-color: #f0c600;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 150px;
margin-top: -75px;
margin-left: -75px;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
}
.object{
width: 20px;
height: 20px;
background-color: #FFF;
position: absolute;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
-webkit-animation: animate 0.8s infinite;
animation: animate 0.8s infinite;
}
#object_one {
top: 19px;
left: 19px;
}
#object_two {
top: 0px;
left: 65px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#object_three {
top: 19px;
left: 111px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#object_four {
top: 65px;
left: 130px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#object_five {
top: 111px;
left: 111px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#object_six {
top: 130px;
left: 65px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#object_seven {
top: 111px;
left: 19px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#object_eight {
top: 65px;
left: 0px;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
@-webkit-keyframes animate {
25% {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
75% {
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes animate {
50% {
-ms-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
}
100% {
-ms-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
}
You will notice that i used keyframe twice ‘@-webkit-keyframes’ and ‘@keyframes animate’ first is for webkit based browsers second one is for internet explorer.
Step 3: Jquery
This is just used for on-click to hide loading images
$(window).load(function() {
$("#loading-center").click(function() {
$("#loading").fadeOut(500);
})
});
