Preloader

Rasel

Preloaders offer several benefits for websites, including:

Improved User Experience:

Preloaders can make your website feel faster by reducing the perception of waiting time. Instead of seeing a blank screen or partially loaded content, users will see a preloader indicating that the website is loading. This can help to improve the user experience and make your website more engaging.

Reduced Bounce Rate:

A website that takes too long to load can lead to high bounce rates, where visitors leave the website without interacting with it. By using a preloader, you can give users an indication that the website is still loading, which can encourage them to stay on the site until it’s fully loaded.

Better SEO:

Website loading speed is a key factor in SEO (search engine optimization). By using a preloader, you can improve your website’s loading speed and reduce the bounce rate, which can help to improve your search engine rankings and drive more organic traffic to your site.

More Control:

Preloaders give you more control over how your website is loaded. By preloading assets like images and videos, you can ensure that they are loaded in the correct order and at the right time, which can help to improve the overall performance of your website.
Overall, preloaders are a simple but effective way to improve the user experience, reduce bounce rates, improve SEO, and gain more control over how your website is loaded.

Here is a working that works and you can try it in a code snippet or function.php file

Preloader 1


<?php
if ( ! function_exists( 'wp_body_open' ) ) {
    function wp_body_open() {
        do_action( 'wp_body_open' );
    }
}
add_action('wp_body_open', 'add_code_on_body_open');
function add_code_on_body_open() {
  ?>
<style type="text/css">
/* Preloader css*/
/*-----loading----*/
	
	html.et-fb-root-ancestor .loadeer {
		display:none !important;
	}
.loadeer {
    position: fixed;
    z-index: 99999999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
	  background-color: rgb(240,240,241);
}
.loadeer.hidden {
    animation: fadeOut .05s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}


.loadera {
  position: relative;
  display: block;
  height: 50vh; width: 100%;
  min-height: 250px;
  z-index: 100;
  
  background-color: rgb(240,240,241);
  overflow: hidden;
}

@media screen and (min-width: 425px) {
  .loadera { width: 50%; }
}
@media screen and (min-width: 768px) {
  .loadera { width: 33.33%; }
}
@media screen and (min-width: 1440px) {
  .loadera { width: 25%; }
}

/* loader-41 */
.loader-41 .loader-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  border: 5px solid rgb(235,235,236);
  border-radius: 50%;
}
.loader-41 .loader-container::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  border-top: 7px solid #ef4361;
  border-radius: 50%;
  animation: spin41 1.8s infinite ease-in-out;
}
  .loader-41 p {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 2px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ef4361;
  }
  .loader-41 p.loader-title {
    color: transparent;
    z-index: 3;
  }
  .loader-41 p.loader-title-double {
    color: #ef4361;
    z-index: 1;
    animation: loader41 2.5s 1s infinite ease-out;
  }      

@keyframes spin41 {
  0%   { transform: translate(-50%, -50%) rotate(0deg);}
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes loader41 {
  0%  { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0.6; }
  38% { opacity: 1; }
  50% { opacity: 0.5; }
  60% { opacity: 1; }
  70% { opacity: 0.5; }
  100% { opacity: 1; }
}
</style>
        <div class="loadeer">
 <div class="loadera loader-41">
  <div class="loader-container">
    <p class='loader-title-double'>ONEMCO</p>
    
  </div>
</div>
</div>
<script>

/*-----loader Hidden----script---*/
    
window.addEventListener("load", function () {
    const loader = document.querySelector(".loadeer");
    loader.className += " hidden"; // class "loader hidden"
});
 
/*-----end----script-----*/
</script>

<?php
   
}

Preloader 2

<?php
if ( ! function_exists( 'wp_body_open' ) ) {
    function wp_body_open() {
        do_action( 'wp_body_open' );
    }
}
add_action('wp_body_open', 'add_code_on_body_open');
function add_code_on_body_open() {
  ?>
<style type="text/css">
#preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 9999;
    }

    #preloader .spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      margin: -20px 0 0 -20px;
      border: 4px solid #ccc;
      border-top-color: #333;
      border-radius: 50%;
      animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
</style>
 <script>
    window.addEventListener('load', function() {
      // hide preloader
      var preloader = document.getElementById('preloader');
      preloader.style.display = 'none';
      // display content
      var content = document.getElementById('et-boc');
      content.style.display = 'block';
    });
  </script>
<div id="preloader">
    <div class="spinner"></div>
  </div>
<?php
   
}