How to Add Custom Preloader on Joomla Sites

Webpages occupy storage, each page has a different size. Depending on the size of the webpages, the loading time varies. The smaller the size is the faster the page loads. On the contrary, the larger the file size is the slower the page loads.

Ideally, we want our website to load instantly, within a blink of an eye. It is theoretically possible when the page size is 0 bit. Which is impractical. Cause then we wouldn’t have any content. It’s an empty page. However, that’s not how the real world works. We’ll always have content on our site and it will always need a few seconds to load. 

We try to keep the loading time to a minimum. But we cannot make our website lighting fast. Well technically, yes. We could. We could make a static site lighting fast. But then it wouldn’t be a dynamic website. Well, that’s a topic that can be discussed on a different day. 

Therefore, we need to provide something on the screen that will keep the users engaged while our website loads on the backend. That’s when a preloader comes. It is something that is displayed while/when the actual content of the website loads. Since we’ve established the importance of a preloader. Let’s see how we can add a preloader to our Joomla website.

How to Add a Preloader on Your Joomla Site?

It’s pretty simple! We’ll use a tool to achieve this goal. If you’re a Joomla developer who has been around for a while, you’d be familiar with the tool. It’s Helix Ultimate. Many of the popular Joomla templates have been developed on the Helix Ultimate framework. Hence, we’ll see how to add a custom preloader on Helix Ultimate based templates. 

Well, there are 2 ways to do this. We can either use a GIF or write custom CSS. We’ll try out both. But first, we need to do one thing that is common for both methods. To do that, navigate to your site backend > Extensions > Templates > Styles. 

This will take you to the page where you’ll find a list of all templates that are installed on your site. From there, click on your desired template (i. e. your Helix Ultimate based template).

Doing that will take you to a screen where you’ll find the template customizing option. Click on the green “Template Options” button. 

You’ll be presented with the options that will let you customize the entire template. To achieve our goal, we need to Basic > Body > and turn the Preloader option On then hit “Save”. 

This will turn on a preloader for your site. However, if we want to use a custom preloader, then our work is not done yet.  

How to Add a Custom Preloader on Your Joomla Site?

As we were saying earlier, we can have either some CSS styles as our preloader or a GIF that we like as our preloader. Firstly we’ll learn to add a GIF file as our preloader. This will open up countless possibilities. We can use whatever we like as a preloader for our Joomla site.  

How to Add GIF as a Preloader on Your Joomla Site?

It’s super simple. If you’re on localhost, you can go to the htdocs folder, and open up the /templates/TEMPLATE-NAME/index.php file with a code editor. 

If your site is live, you need to go to your server and find the /templates/TEMPLATE-NAME/index.php file. Then open it with a text editor. 

Once we did that, we need to find the .sp-preloader class and replace the inner div with a <img> tag. 

Inside the <img> tag you need to put the GIF link. See the image below for reference. 

Done! You just need to save the file. Reload your website and you’ll have the GIF as your preloader. 

How to Use Custom CSS as a Preloader on Your Joomla Site?

The process of using CSS is even easier. You need to navigate to the CSS folder. Which is /templates/TEMPLATE-NAME/css. Inside the CSS folder, you need to create a CSS file. The name has to be custom.css. This will not work otherwise.

Now, inside the immediate child (div) of .sp-preloader and put your CSS. Then, you need to make the :after content of the same element none. 

Or, you can just use the following example code for reference and just replace the CSS with your own. 

.sp-preloader > div {
   pointer-events: none;
   width: 2.5em;
   height: 2.5em;
   border: 0.4em solid transparent;
   border-color: #eee;
   border-top-color: #3E67EC;
   border-radius: 50%;
   animation: loadingspin 1s linear infinite;
   background: none;
}

.sp-preloader > div:after {
   content: none;  
}

@keyframes loadingspin {
   100% {
           transform: rotate(360deg)
   }
}

Wrapping Up

Creating your custom preloader should not be a hassle anymore. Hopefully, this tutorial will help you create a preloader for your Joomla website. Unleash your creativity and make your visitors browsing fun with a preloader. Until next time, happy developing :)

If you didn’t know how to add custom preloader for your Joomla site, now you know. What would you like to know next? Put your thoughts in the comments below and let us indulge your curiosity.