Joomla - Preloader for the slider

Some website are slow, and the lazy loading is making an animation between all slides, what some people don’t like. To have a preloader, you will have to find the module position, where your slider is. If you open up your template’s index.php file, or a file, that can also be in a tmpl, or some template, maybe layouts sounding folder, then look for that position’s name. It will either be a position loading code of the template, you will see, that there is usually the “module” word there too, or it will be the default Joomla’s module position loading:

<jdoc:include type="modules" name="mypositionsname"/>

When you got it, you can put it into a relative positioned div, and put an absolute positioned div next to it, where you could put a css animation, which is loading fast, so there wouldn’t be an empty space, while the slider is loading:

<div style="position:relative;">
	<div style="position:relative;z-index:1;">
		<jdoc:include type="modules" name="mypositionsname"   />
	</div>
	<div id="sliderloader" style="position:absolute; top:50%; left:50%; right:0; bottom:0; margin-top:-15px; margin-left:-15px; z-index:0;">
		<div class="spinner"></div>
	</div>
</div>

This is how it looks like in your template manager:
templatemanager

Then the css code of the spinner animation is this:

<style>
.spinner {
width: 30px;
height: 30px;
background-color: #333;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>

You can put it into your template’s css file:
templatecss

And if you want to make the spinner disappear (although it will be covered by the slider, so it won’t be seen), then use this javascript code:

<script>
jQuery(window).load(function() {
	jQuery('#sliderloader').hide();
});
</script>

Which can go to the slider, Edit Slider -> in the bottom: HTML Widget:
script

I put the css code of the positions as inline codes, and only the animation’s code as css codes, because if you google “css loading animation”, you will find many more, and all you have to do is to replace the css code, and this part of the html code:

<div class="spinner"></div>

Also you will have to change the margin-top:-15px; margin-left:-15px; to the negative half height and width of your spinning div.