Problem with Pre-Loaders

Hello All,

I designed a website and added a preloader to it. But the preloader is appearing on the top left corner instead of center of the page. The page has to be invisible while the preloader is going on but the site is completely visible. As soon as the site loads completely, the preloader vanishes perfectly.

Have a look at the site : www.techkrafters.com

I want the preloader to appear in the center of the screen and the site to be invisible while the preloader function is being executed.

Thanks in advance for your help,

Cheers,
Yashwanth.

 

Hi YYashwanth and welcome to TSG
You could try replacing your inline css ...

Code:

.loaderClass

{

position: absolute;

top: 0px;

left: 0px;

z-index: 999999;

text-align: center;

width: 100%;

height: 200px

}

with this ...

Code:

#loading_div

{

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

z-index: 10;

background: url('Preloader/loader.gif') 50% 50% no-repeat;

background-image: url('img/overlay.png');

}

... and put a suitable overlay.png (128px x 128px) into your img folder.
You could then change your html code from this ...

Code:

      <div id="loading_div">
         <img src="Preloader/loader.gif"  height="66" width="66"><br>
     </div>

... to this ...

Code:

      <div id="loading_div"></div>

The styling which centres your loader image is the '50% 50% no-repeat;' and of course in order to temporarily hide your page rendering we include the overlay png

The 'loaderClass' has been dropped because you never used it.

This code has not been tested ('twas off the top of my head), and may require some tuning, but it should work

 

Hello JiminSA, I tried which you suggested but there was no change. The overlay.png was visible and it covered the website. But the preloader was not visible . I tried every possible combination but still there was no change so I had to undo the changes because , the structure of the site got changed for some reason which I could not understand.

Could you please help me out with this ?

 

N.B. Changed from original post
OK let's try drop the z-index and use backgound stacking, (described here), as follows
FROM

Code:

z-index: 10;

background: url('Preloader/loader.gif') 50% 50% no-repeat;

background-image: url('img/overlay.png');

TO

Code:

background: url('Preloader/loader.gif') 50% 50% no-repeat,
            url('img/overlay.png');

and see what happens ...

 

Hi again YYashwanth - do you still want to resolve this issue?

 

Hello JiminSA. I did the changes as said and it worked perfectly for the preloader to be at the center. But the website is still visible. If i scroll down, the preloader still turns and the site overlaps the preloader.

Please let me know how to get this sorted.

Thanks a lot for your help.

 

Could you please re-instate the code so that I may observe what's happening?

 

Hello, I restored the site to its original.

 

Which shows me nothing of what the code I suggested is doing ... if you could reinstate that code, please, I'd be grateful. It appears that your animated cube may be dominating the pre-load ...

 

Oops .. Sorry . I restored the preloader code and I have a doubt, when a site is opened, the preloader should appear first right ? but nothing happens for the first few seconds and the preloader appears with the rest of the site. . What could be the error ?

 

Yes, thank you. have you left out the javascript to fade out the loading div??

 

Yes, as soon as the page loads, the pre loader dissappears.

 

I don't see the javascript function in your html source code? Is it tucked away in one of your javascript files somewhere?
Because when I link to your site, the loading div remains after body load completes!

 

It is right before the </head> tag. That's the one right ?

 

Sorry I got side tracked - Yes I didn't see it initially! The page now renders OK, but the cube is indeed dominant over the pre-load display - which I presume is the small revolving cube on a white background?
I shall investigate why the main cube is dominant during load and report back ...