Joomla tutorials

Creating a preloader in Joomla – specific installation

Today we will discuss with you how to create your own preloader or a preloader for my website built on Joomla CMS. First you need to decide whether it is required as part of the load on the server will still happen, although a lot of advantages – the user will know that until he sees pre-loading the page will not be displayed fully, and that means he won’t have to load the remaining elements.

Создание прелоадера в Joomla

There are several types of preloader, flash preloader, gif, and svg loaders. But no matter how you use it, you need to keep in mind the size of the executable. In our case we insert a gif image that will scroll during page load of the site, and as soon as it (the page) is fully loaded, the preloader will be removed.
To start, we need to add this code (if the jQuery code is not installed earlier):

You then insert the code after the tag :
Oh, and finally, the code before :
Don’t forget to put a rule for CSS styles in 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 */ ]
The sources of preloader can be easily found online. For this search type: generator “preloader”.
And don’t forget that in CSS, we prescribed path to our preloader:
You, of course, feel free to change it, you change the name to another end of the file loader.
The ability to install any preloader in Joomla.
The minimum load on the website.
All changes you make yourself.