Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Center the loading .gif in the middle of the screen?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #42959
    hendrix940
    Participant

    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

    #125978
    Paulie_D
    Member

    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.

    #126070
    hendrix940
    Participant

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

    #126111
    Paulie_D
    Member

    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.

    #126676
    hendrix940
    Participant

    I appreciate all the help!! Thank you all!

    #126683
    DADE
    Participant

    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.

    #126688
    hendrix940
    Participant

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

    #126695
    TylerNYC
    Member

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

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

    #126698
    DADE
    Participant

    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.

    #126727
    Merri
    Participant

    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.

    #126738
    DADE
    Participant

    @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;
    }

    #126788
    hendrix940
    Participant

    Thanks for the help all!

    #263222
    ugultopu
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.