Preloader in WordPress Without Using a Plugin
in ,

Adding a Preloader in WordPress Without Using a Plugin

If you want to add a Preloader in WordPress website without using a plugin? Then welcome this is a write place. Before starting this we must know what is a preloader, why we used it? & why adding a preloader in wordpress without a plugin is good?

So, let’s get started!

What is a preloader?

Essentially, preloaders (additionally called loaders) are what you spot at the display screen whilst the relaxation of the page’s content material remains loading. Preloaders are frequently easy or complicated animations which can be used to hold traffic entertained whilst server operations end processing.

You may also like these:

Why adding a preloader in wordpress without a plugin is good?

Using a plugin for every small-small thing will increase your page weight & website weight due to heavy used of JS which leads to the decreasing in page speed which plays an extremely role in ranking & page SEO.

Related Articles:

Preloader in WordPress Without Using a Plugin

Preloader in WordPress Without Using a Plugin

You can manually add a Preloader in WordPress using CSS. For this, you would require the CSS source code of a preloader animation.

You can get it from various websites on the internet, such as Spinkit, Ladda, NProgress, Pace, etc. Let us take a look at how to achieve this:

  • The first step is to add the below HTML code beneath the body tag of the index.html file of your website:<!–CSS Spinner–>
    <div class=”loader-wrapper”>
    <div class=”loader”></div>
    </div>
  • Next, copy the CSS source code of a preloader animation from any of the websites mentioned above. You need to paste this code in the CSS stylesheet of your website.
  • The elements loading should be hidden by covering the whole window. To do this, you need to add the following code in your CSS styelsheet:
  • .loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff6347;
    z-index: 999999;
    }
  • In the next step, we need to remove the value of margin in the loader class, and change the value of position to absolute, top to 48% and left to 48%. The spinner is thus brought to the center of the division.

You May also Like these:

  • Next, we need to add jQuery for the spinner to function. In the index.html file, before the body tag, add the following code:
  • <script>
    $(document).ready(function() {
    //Preloading animation
    preloaderFadeOutTime = 600;
    function fadePreloader() {
    var preloader = $(‘.loader-wrapper’);
    preloader.fadeOut(preloaderFadeOutTime);
    }
    fadePreloader();
    });
    </script>
  • After adding a Preloader Animation to WordPress, we can add a preloader transition to move the preloader sections out of view. To achieve this, open the main.css file and add the below code:
  • /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    }.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%); }

To hide the preloader, we can set the opacity to 0. However, this might make our content inaccessible, so we need to change the visibility to hidden as well.

Written by MI MEDIA

What do you think?

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

Loading…

0
Windows 11 ISO Download

Windows 11 Leaked, ISO Download & Install!

farm bill 2020

Farm Bill 2020 complete explanation