WordPress - 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. You could put your slider’s shortcode 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;">
		[smartslider2 slider="565"]
	<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>

This is how it looks like in your post:


Then the css code of the spinner animation is this:

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

You can put it into your theme’s style.css file:

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:

jQuery(window).load(function() {

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

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.