How To Make A Preloader For Your Landing Page

Posted By : Rohit Goyal | 31-Dec-2016

Are you building yor website and getting concerned about some opening animation on your page. The one page websites can get quite bulky very quickly even when you are optimizing everything.One option to overcome this problem is to add a nice custom preloader.

So, we will add a CSS3 transitions.Once the content of the page is loaded, we will animate the preloading screen.

What you will learn:-

how to use CSS3 transitions
how to animate out a full-screen preloader
how to combine CSS3 with JavaScript for this technique

STEP 1:- ADD HTML IN YOUR PAGE.

HTML:-

<div id="loading">
      <div id="loading-center">
        <div id="loading-center-absolute">
          <div id="object"></div>
        </div>
      </div>
   </div> 
       

you have to insert this html code in your page.

STEP 2:- ADD SOME J-QUERY IN YOUR CODE.

JS :-
You can Download jquery file from http://jquery.com/ . Insert this file in your script.

<script src="jquery-1.11.3.min.js"></script>
<script>
   $(window).load(function() {
     $("#loading").fadeOut(500);
   });
</script> 
        

   $(window).load(function() this line means that your inner code not excuted untill the window load is complete.  
   After your page loads , animation will show. loding div contain our all animation and fadeout time will half second.


STEP 3:- ADDING SOME CSS

CSS:-

Now we’ll add some CSS into the css in your page.you can add this css in your page by creating a style.css file.like below:-

<link href="style.css" rel="stylesheet" type="text/css" />
#loading{
    background-color: #bd4932;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 10;       
    margin-top: 0px;
    top: 0px;
}
#loading-center{
    width: 100%;
    height: 100%;
    position: relative;
}
#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
}
        

STEP 4:- ADDING SOME CSS3 ANIMATION.

 #object{
    width: 80px;
    height: 80px;
    background-color: #FFF;
    -webkit-animation: animate 1s infinite ease-in-out;
    animation: animate 1s infinite ease-in-out;
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
}
@-webkit-keyframes animate {
  0% { -webkit-transform: perspective(160px); }
  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
@keyframes animate {
  0% {
    transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
  } 50% {
    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
  } 100% {
    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
  }
}
    


   In 0% animation time, the object will not rotate. because rotation from x and y is zero.
   In 50% animation time, the object will rotate along x-axis -180deg and rotation in y is zero.It means that x-axis top corner will shift to downward corners.
   In 100% animation time, the object will rotate along x-axis and y-axis 180deg, means that corner of x-axis and y-axis will shift again.

 

Pretty cool, huh?
And that’s it, you’ve made it!
You’ve created a nice animated preloading screen using CSS3 animations and transitions.

THANKS
 

About Author

Author Image
Rohit Goyal

Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.

Request for Proposal

Name is required

Comment is required

Sending message..