What is the way to manually insert a preloader in Divi-child homepage header?

Dan Cook · Oct 11, 2023

header.php code https://zerobin.net/?ea6167f2af4d2e24#GTOJZ0rcpLojqhpnCc+cK4FlCRFNtv2HvAB+osySc8o=

What is the way to manually insert a preloader in Divi-child homepage header?

I found a preloader i like, but whether i insert the code below the body on header.php or with WP Smart prealoder with the custom html/css, it either displays too big, or misplaced. Tends to be around the secondary menu, (at the very top).

The preloaders display fine on a test.html file.

The loaders baked into WP Smart Preloader work fine.
I tried other loader's html/css code on header.php, and the same issue happens!

If i can't achieve what i want manually as i don't like plugins, does DP Preloader https://www.elegantthemes.com/marketplace/dp-preloader/
from "Elegant Themes", work well with custom html/css?

**PS: Please look at the header.php code in pastebin to confirm if the loader html/css is in the right place?**

Preloader Code below.
HTML:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
     <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <header>

<div class="dot-loader"></div>
<div class="dot-loader"></div>
<div class="dot-loader"></div>

<style>
.dot-loader{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #03A9F4;
    position: relative;
    -webkit-animation: 1.2s scaleDown ease-in-out infinite ;
    animation: 1.2s scaleDown ease-in-out infinite ;
}

.dot-loader:nth-child(2){
    margin: 0 15px;
    -webkit-animation: 1.2s scaleDown ease-in-out infinite .15555s;
    animation: 1.2s scaleDown ease-in-out infinite .15555s;
}

.dot-loader:nth-child(3){
    -webkit-animation: 1.2s scaleDown ease-in-out infinite .300000s;
    animation: 1.2s scaleDown ease-in-out infinite .300000s;
}

@-webkit-keyframes scaleDown{
    0%, 80%, 100%{
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    40%{
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}

@keyframes scaleDown{
    0%, 80%, 100%{
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    40%{
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}

</style>

Divi.Help · Oct 12, 2023

Dan Cook said: ↑
header.php code https://zerobin.net/?ea6167f2af4d2e24#GTOJZ0rcpLojqhpnCc+cK4FlCRFNtv2HvAB+osySc8o=

What is the way to manually insert a preloader in Divi-child homepage header?

I found a preloader i like, but whether i insert the code below the body on header.php or with WP Smart prealoder with the custom html/css, it either displays too big, or misplaced. Tends to be around the secondary menu, (at the very top).

The preloaders display fine on a test.html file.

The loaders baked into WP Smart Preloader work fine.
I tried other loader's html/css code on header.php, and the same issue happens!

If i can't achieve what i want manually as i don't like plugins, does DP Preloader https://www.elegantthemes.com/marketplace/dp-preloader/
from "Elegant Themes", work well with custom html/css?

**PS: Please look at the header.php code in pastebin to confirm if the loader html/css is in the right place?**

Preloader Code below.
HTML:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
     <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <header>

<div class="dot-loader"></div>
<div class="dot-loader"></div>
<div class="dot-loader"></div>

<style>
.dot-loader{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #03A9F4;
    position: relative;
    -webkit-animation: 1.2s scaleDown ease-in-out infinite ;
    animation: 1.2s scaleDown ease-in-out infinite ;
}

.dot-loader:nth-child(2){
    margin: 0 15px;
    -webkit-animation: 1.2s scaleDown ease-in-out infinite .15555s;
    animation: 1.2s scaleDown ease-in-out infinite .15555s;
}

.dot-loader:nth-child(3){
    -webkit-animation: 1.2s scaleDown ease-in-out infinite .300000s;
    animation: 1.2s scaleDown ease-in-out infinite .300000s;
}

@-webkit-keyframes scaleDown{
    0%, 80%, 100%{
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    40%{
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}

@keyframes scaleDown{
    0%, 80%, 100%{
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    40%{
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}

</style>
Click to expand...
From what I see from your code, it only has preloader icon added to your site. There's no fullscreen overlay to hide the content on load. There's also no script to fade out the preloader when finished loading.

If you're looking for a full preloader solution without any plugins, you may check out Divi Block premade preloader design: https://diviblock.com/divi-preloader/
**Do note that you will need to use the premade preloader design at Divi Theme Builder global header. Use it as the first section in the global header to prevent seeing any flashes when the page load. But if you were to use default Divi header, then you will need to replicate the design with Divi Theme Builder for your global header. This is because if you're using Divi Theme Builder global header, the default Divi header will be replaced / hidden.
**No need for any child theme PHP customization.

What is the way to manually insert a preloader in Divi-child homepage header?

Dan Cook New Member

Divi.Help Administrator
Staff Member

Useful Searches

What is the way to manually insert a preloader in Divi-child homepage header?

Dan Cook New Member

Divi.Help Administrator Staff Member

Divi.Help Administrator
Staff Member