Preloader

fflores
Offline
Last seen: 1 year 4 weeks ago
Thu, 03/24/2016 - 17:07
#1
Preloader

How do I change the square preloader to an image ( logo) ?

Thanks

hattt13
Offline
Last seen: 3 days 1 hour ago
Fri, 03/25/2016 - 09:50

Hi,

You can change the preloader with the code:

<div class="preload">
<div class="flat"></div>
<div class="square"></div>
<div class="square-2"></div>
<div class="square-3"></div>
<div class="square-4"></div>
</div>

For ex. if your image preload is example-logo.jpg

<div class="preload">
<div class="flat"></div>
<img src="example-logo.jpg">
</div>

Then open file style.css and add:

.preload img {
position: absolute;
top: 50%;
left: 50%;
z-index: 9;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

fflores
Offline
Last seen: 1 year 4 weeks ago
Tue, 03/29/2016 - 02:03
Does not work! I did everything you say .. but the website is all black now! 
cindy
cindy's picture
Offline
Last seen: 2 hours 17 min ago
Tue, 03/29/2016 - 09:31

Hi,

Please change in .preload img:  z-index: 99999;
Open file scripts.js and replace 

 $('#preload').addClass('completed');

with

 $('.preload').addClass('completed');
Log in or register to post comments