How to Add Custom Preloader on Joomla Sites - JoomShaper

How to Add Custom Preloader on Joomla Sites

12 February 2020
Hits 12,480
5 min read
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. 

How to Fix Broken Links on Joomla

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).

How to Fix Broken Links on Joomla

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

How to Fix Broken Links on Joomla

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”. 

How to Fix Broken Links on Joomla

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. 

How to Fix Broken Links on Joomla

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

How to Fix Broken Links on Joomla

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. 

4 years ago
TOP! thanks
Paul Frankowski
Paul Frankowski
4 years ago
thanks a lot
Ugur Uygur
Ugur Uygur
2 years ago
Could you post an install post for the Helix new version? It is not used because the code structure has changed in the new version.

Laurent K.
4 months ago
My custom preloader works with you code, but it is situed at the top left of the windows, not at the middle, like the template helix preloader...
How to put the custom preloader at the middle of the screen?
Thanks for your answer
Best regards

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.