Problem with Pre-Loaders

YYashwanth · Mar 28, 2015

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.

JiminSA · Mar 29, 2015

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

YYashwanth · Mar 29, 2015

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 ?

JiminSA · Mar 29, 2015

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

JiminSA · Mar 31, 2015

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

YYashwanth · Mar 31, 2015

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.

JiminSA · Mar 31, 2015

Please let me know how to get this sorted.

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

YYashwanth · Mar 31, 2015

Hello, I restored the site to its original.

JiminSA · Mar 31, 2015

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

YYashwanth · Mar 31, 2015

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 ?

JiminSA · Mar 31, 2015

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

YYashwanth · Mar 31, 2015

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

JiminSA · Mar 31, 2015

<body id="top" onLoad="loadingDivHide()">

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!

YYashwanth · Mar 31, 2015

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

JiminSA · Mar 31, 2015

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

Problem with Pre-Loaders

YYashwanth

JiminSA

YYashwanth

JiminSA

JiminSA

YYashwanth

JiminSA

YYashwanth

JiminSA

YYashwanth

JiminSA

YYashwanth

JiminSA

YYashwanth

JiminSA

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Welcome to Tech Support Guy!

Latest posts

Members online