Loader loads in upper-left corner before centering on page

[erwanx]

Hi João, thank your for this great, simple plugin!

I've got it all set up with a custom animated SVG and it's working fine except for the loading part. The SVG briefly shows up in the upper-left corner before centering on page. Is there a way to center the container before it loads?

Thanks for your help.

[erwanx]

Can I get some support on this issue, please?

[zxcHolmes]

@erwanx
I find a way to resolve your problem ,you can open the fakeLoader.js file,then find the code "
$(window).load(function(){
centerLoader();
$(window).resize(function(){
centerLoader();
});
});"
in this file . you can excute 'centerLoader()' before window.load,like this:
centerLoader();
$(window).load(function(){
centerLoader();
$(window).resize(function(){
centerLoader();
});
});
and it can center the container before it loads.

[angelo92]

@zxcHolmes i don't now why...but your solution does not work for me

[ryoojw]

Try this:

//Each 
el.each(function() {
    ...
});

// Add this here
$('.fl').css({
    'display': 'none'
});

//Return Styles 
return this.css({

And then add to centerLoader() function:

$('.fl').css({
    'position':'absolute',
    'left':(winW/2)-(spinnerW/2),
    'top':(winH/2)-(spinnerH/2),
    'display':'block' // Add this here
});

[olivetty]

You can add:
.fl { left: calc(50% - 20px); top: calc(50% - 20px); } to css and it's the easiest solution.

[joaopereirawd]

Hi all,

This is fixed in the new version of fakeLoader.

you can see the documentation here:
https://github.com/joaopereirawd/fakeLoader.js/blob/master/README.md

What's new:
https://github.com/joaopereirawd/fakeLoader.js/releases/tag/V2.0.0