Add a Preloader to Your Website Using CSS & JS [Updated 2018]

6
159

Hello,
Do You Know Sometimes Your Website Can Be Slow, What in That Case.
So, Add a Preloader to Your Website Using CSS & JS with This tutorial Which Will Keep Your visitor waiting for Long.

 

Let Me Explain What is Actual this So Called Preloader is, Why You Need it

 

I Will Make Its concept Clear to You

 

A Preloader is A loading Screen That Appears Before Your Website Loads.

 

It Can Be Animation, Or Just Text or Image etc

 

But, Why You Should go and Add a Loader, Preloader or Loading Screen, Whatever You Call it…

 

Because

 

Do You Know.

 

According to Kissmetrics, 47 percent of visitors expect a website to load in less than 2 seconds,
and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.

 

So, your Visitors are going to Leave Your Site Before it Even Try to Open… and What??

 

You Can Add This Preloader Stuff in your Website to make them wait for a little long…

 

This Loading Screen Tells the visitor Site is about to load, Also it Looks attractive which make visitors curious also, to visit the Website.

 

It Doesn’t Matter What You are Using, Self Coded Website or a WordPress Website or other type of Website,

 

This Way Works Best and Fast, It is Simple and Easy to Integrate

 

You Don’t Need to add so much coding or adding more plugins to Do This, Just Do it manually with simplest Steps Explained Below.

.

Also Read:
How to Make a Logo for Free – Best Logo Design Software 2018 [Updated]
Save & Control Internet /Data Usage In Laptop and PC Tips and Tricks
Windows Update Problem Fix – All Errors Solution 2018 [Updated]

 

So Here are Simple Steps to Add a Preloader to Your Website Using CSS & JS in Very Simple Steps

 

 

In this tutorial, I’ll show you the simplest way for adding preloaders to a website using only jQuery and CSS.

  1. Before you can add preloader to your website, Make sure that you have added jQuery to your webpage. If you haven’t already then place the following code within your tag.

    <!--Preloader Starts-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

     

  2. Immediately after the above placed line of code, copy-paste the following code.

    <script>
        jQuery(window).load(function(){
            jQuery(".fact-loader-overlay").fadeOut(500);   });
    </script>
    <!--Preloader Ends-->

    This Code will help in fading out the loader after page is completely loaded

  3. Now, add the following CSS code in your stylesheet. Make sure that the path to the background image is set correctly.

    Note: You have to Set Background URL to the image or animation of your own.

    Choose any preloader animation from internet and Name it “preloader.gif” and save it in Root Folder/images directory.


    /*  Preloader starts  */
    .fact-loader-overlay {
        width: 100%;
        height: 100%;
        background: url('../images/preloader.gif') center no-repeat #f3f3f3;
        background-size: auto; /*You Can Change Size of Your Preloader From Here*/
        z-index: 99999;
        position: fixed;
    }
    /*  Preloader Ends  */
    

    If you want a transparent background, You can use the opacity CSS property.

  4. Just after your body tag, Place the following piece of code.

    <div class="famous-loader-overlay"></div>

     

    Now, There Must Be Preloader on Your Website, Try Accessing Your Website using a Private tab in Browser,

    or Use other Device,

    (Sometimes Because of Caches Data it takes time to update, so You can try your website in different Browser)

  5. If Still it Doesn’t Work, Do following
    •  Disable JavaScript in your browser, To fix that we disable the preloader if JavaScript is disabled by adding the following within the tag.

      <noscript>
          <style>.famous-loader-overlay { display: none; } </style>
      </noscript>

      That’s was all about How to Add a Preloader to Your Website Also, If JavaScript is disabled in the browser, The preloader is not shown at all.

 

Conclusion  – Final Words:

 

A Preloader is Must in Your Website for Making Your Visitors Keep Patients, Otherwise It may Cause loss of Visitor for You, In some Cases, Website Becomes Slow, Your Visitors Will see this Loading Screen which Will make them wait more in comparison to when you don’t have a preloader.

Do share it if you like it and let me know in the comments.

6 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here