Forums

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

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