Forums

Give help. Get help.

  • # February 25, 2013 at 11:03 am

    Guys, I’m trying to center this loading .gif in the center of the white screen, but have yet been unable to do it. Also, is it possible to add a loading % complete? Thanks in advance!

    Here’s the site:
    http://hayleyhendrix.com

    # February 25, 2013 at 11:13 am

    Give the image a class…it’s doesn’t matter what, lets say ‘loading-image’ and do this:

    .loading-image {
    display:block;
    margin: 0 auto;
    }

    As for the % complete, you can fake it but there is no way to measure it.

    # February 25, 2013 at 8:22 pm

    Thanks @paulie_d … by chance do you know code to “fake” it? I’m just looking for something that will display a percent as the page loads. it doesn’t have to be exact. Thanks!!

    # February 26, 2013 at 5:30 am

    I’m sure there are many loading gifs (with numbers) to be found freely via an image search but the other solutions will require javascript to update the numbers….I think.

    # March 2, 2013 at 9:09 am

    I appreciate all the help!! Thank you all!

    # March 2, 2013 at 11:26 am

    I know it’s marked as solved but small tip:

    margin: 0 auto;

    Will only center your image horizontally. What would I do is:

    // Lets say your loading.gif is 100px by 100px
    .white-screen {
    position: relative;
    }

    .loading-gif {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -50px;
    }

    This will center it horizontally and vertically. Margin should be twice less that your image size, so if your image is 100x50px, margin should be -50px 0px 0px -25px.

    # March 2, 2013 at 12:08 pm

    @DADE thanks so much!! I’ll try this!!

    # March 2, 2013 at 1:54 pm

    I came across this one day, hope it helps you.

    http://jsfiddle.net/jonathansampson/VpDUG/170/

    # March 2, 2013 at 2:47 pm

    Makes no sense to me, why can’t you use something like this:

    http://jsfiddle.net/mdxQs/

    And I won’t need to create another hidden div with my loading screen on every page and I won’t need additional plugin.

    # March 3, 2013 at 2:34 am

    Why not have a per-image loading animation? You’d only need to add the loading image centered as the background image of a img element. It’ll automagically disappear once image is loaded and you wouldn’t have a need to hide all the images before loading is complete.

    # March 3, 2013 at 4:55 am

    @CrocoDillon it will work, because position is calculated from div.white-screen, not browser window. But yeah, if you need full screen loading block, than you use position: fixed;

    I probably had to mention that markup should be:

    And CSS:

    .white-screen {
    position: relative;
    }

    .loading-gif {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -50px;
    }

    # March 3, 2013 at 4:15 pm

    Thanks for the help all!

    # December 1, 2017 at 1:34 pm

    The fiddle given by @TylerNYC is perfect. However:

    As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the .ajaxStart() method, must be attached to document.

    Hence, you need to change the ajaxStart() and ajaxStop() part as follows:

    $(document).on({
        // When ajaxStart is fired, add 'loading' to body class
        ajaxStart: function() { 
            $('body').addClass("loading"); 
        },
        // When ajaxStop is fired, rmeove 'loading' from body class
        ajaxStop: function() { 
            $('body').removeClass("loading"); 
        }    
    });
    
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag