Today we will look at how to create your own preloader, or in other words, a preloader for your website built on the Joomla CMS. First, you need to decide whether it is really necessary, since some server load will still occur, although there are many advantages - the user will know that while they see the preloader, the page will not be fully displayed, which means they won't have to load the remaining elements.

Creating a preloader in Joomla

There are several types of preloaders: Flash preloaders, GIF and SVG loaders. But no matter which one you use, keep in mind the size of the executable file. In our case, we will insert a GIF image that will play during the loading of the website page, and once the page is fully loaded, the preloader will be removed.

Creating a preloader in Joomla

To begin with, we will need to add the following code (in case the jQuery code is not installed previously):

Next, you need to insert the code after the tag:

  
   
 

And finally, the code before :

Don't forget to add the CSS style rule to the page code:

 /* Preloader */ #preloader {   position:fixed;   top:0;   left:0;   right:0;   bottom:0;   background-color:#fff; /* change if the mask should have another color then white */   z-index:99; /* makes sure it stays on top */   opacity: 0.7; ] #status {   width:200px;   height:200px;   position:absolute;   left:50%; /* centers the loading animation horizontally one the screen */   top:50%; /* centers the loading animation vertically one the screen */   background-image:url(../images/status.gif); /* path to your loading animation */   background-repeat:no-repeat;   background-position:center;   margin:-100px 0 0 -100px; /* is width and height divided by two */ ]

You can easily find the source files of preloaders online. To do this, type in the search engine: "preloader generator".

And don't forget that in the CSS we specified the path to our preloader:

 ../images/status.gif

Of course, you can easily change it by renaming the final loader file.

Advantages

  • Ability to install any preloader you like in Joomla.
  • Minimal load on the site.
  • All changes are made independently.
General

Was this helpful?

A
Admin

Blogger and educator on photography, design, and digital creativity.

All articles