search

joaopereirawd / fakeLoader.js

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.
MIT License
721 stars 270 forks source link

Bars Appears on Top Left Corner Before Centering #3

Closed Behseini closed 9 years ago

Behseini commented 9 years ago

Hi, First of all thank you for sharing this great plugin! I am trying to use your solution on This demo http://bazikontarin.com/Paralax Using Bootstrap 3 framework but for a reason the Bars appears first on top left corner and then moves to center! This might be watchable if you refresh the page several times! Can you please let me know why this is happening? and how I can fix it? Thanks

Behseini commented 9 years ago

Hi Again, I just noticed that this issue is happening when I am using Bootstrap Carousel in the about Section !

AlexRebula commented 9 years ago

Hey Behseini. Have you found the solution to your problem? Does it still happen?

I am doing some work on this plugin myself and I encounter a similar problem with a new element I added to the plugin. I solved the problem by the traditional way of first setting the 'display: none' CSS property to the newely added element (added a new brandLogo property... check out my fork) and once the element is placed to the center of the screen I simply fade it in. If you still have this problem with your spinner this may be the solution.

BTW, can you show me the code that replicated the bug? Because if the problem persists, this is a matter of two lines of code, so I might fix this im my fork.

AlexRebula commented 9 years ago

Aha, I see this bug has been issued. It would be good if the author would close this issue then not to confuse us. :)

juan-manuel-alberro commented 9 years ago

I have the same issue and I fixed in this way (check the .hide() and .fadeIn() chained in the selector)

    function centerLoader() {

        var winW = $(window).width();
        var winH = $(window).height();

        var spinnerW = $('.fl').outerWidth();
        var spinnerH = $('.fl').outerHeight();

        $('.fl').hide().css({
            'position':'absolute',
            'left':(winW/2)-(spinnerW/2),
            'top':(winH/2)-(spinnerH/2)
        }).fadeIn();

    }