Preloaders (also known as loaders) are what you see on the screen while the rest of the page’s content is still loading. Preloaders are often animations that are used to keep visitors entertained while server operations finish processing.
In this article, we will teach you how to add a Preloader in WordPress without a plugin.
How to add preloader in WordPress without plugin
Step 1. Find an animated loader icon
Just Google “loader animation” to find hundreds of great resources to download animated preloader. It is better to use files with SVG extension, if you had problem finding SVG files, use GIF instead. SVG files are smaller and load faster.
You can also use the above three animations for your website.
After finding the right animation file, upload it to your site and copy it’s link to use it in the next step.
Step 2. Copy the following snippet code in functions.php
In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and update it.
You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]
As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.
// WordPress Preloader by Redpishi.com
add_action( 'init', 'Redpishi_Preloader' );
function Redpishi_Preloader() { if(!is_admin() && $GLOBALS["pagenow"] !== "wp-login.php" ) {
$delay = 1; //seconds
$loader = 'https://redpishi.com/wp-content/uploads/2022/06/preloader3.svg';
$overlayColor = '#ffffff';
echo '<div class="Preloader"><img src="'.$loader.'" alt="" style="height: 150px;"></div>
<style>
.Preloader {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: '.$overlayColor.';
z-index: 100000;
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
<script>
document.body.style.overflow = "hidden";
document.addEventListener("DOMContentLoaded", () => setTimeout( function() { document.querySelector("div.Preloader").remove(); document.body.style.overflow = "visible"; } , '.$delay.' * 1000));
</script>
'; }}Customize the above code using the description below:
$delay: The number of seconds you want the loader to be displayed, if you select 0, the loader display will end as soon as the page is fully loaded.
$loader: Put your loader link here.
$overlayColor: color of overlay background in Hex, it can be transparent or opaque.
Congratulation, After making changes and saving the functions.php, your site’s preloader is ready.
If this article is difficult for you to read in text, you can watch the video version below.
Will adding a preloader slow down my website’s loading time?
Adding a preloader should not significantly impact your website’s loading time, as it is a relatively lightweight feature. However, it’s important to ensure that the preloader is properly optimized and does not rely on large images or scripts that could increase the load time. Additionally, you should always test your website’s performance after implementing a preloader to ensure that it does not negatively affect the user experience.
Can I use a custom preloader design or animation instead of the default spinner?
Yes, you can create a custom preloader design or animation to match your website’s branding and style. You can use any svg animations and incorporate them into your WordPress theme using the same method described in the article. Just make sure that your custom preloader is optimized for fast loading and works well across different browsers and devices.
Is it possible to display the preloader only on specific pages or posts?
Yes, it is possible to display the preloader only on specific pages or posts. To do this, you would need to modify the conditional statement in the custom code added to your theme’s functions.php file. Instead of displaying the preloader on every page load, you can specify particular pages or posts by using their IDs or other conditional tags provided by WordPress. This allows you to have more control over where the preloader is displayed on your website.
It works, but it also moves all related styles, links and scripts right below tag.
not working on blog or post page in Astra & Newscard theme
Great content. Highly Recommend. This post helped me to add a preloader in wordpress
without use of any plugin
after preloader overflow x visible and scroll horizontal its look very bad