Grow your CSS skills. Land your dream job.

Center the loading .gif in the middle of the screen?

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

    # February 26, 2013 at 5:38 am

    Just thinking out loud here, never tried anything like this. I think you can use JavaScript to get all images (or other resources perhaps) from your page, see if they are loaded and bind an event handler to when they get loaded. Then you can say something like when 3 out of 10 images are loaded ~ 30% :P

    You can enhance this by getting the image file size somehow (reading ‘Content-Length’ from the response header could work), so if the 3 images loaded are only 200kB out of 1000kB total ~ 20% would be a better approximation.

    You can even enhance this further by checking if the browser supports [XMLHttpRequest 2](http://caniuse.com/#feat=xhr2), then you can read the actual bytes loaded and get a very accurate measurement for percentage loaded. You can read more about it here: http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/ (they even have a [demo](https://blogs.adobe.com/openweb/files/ImgProgressSample.html))

    I can’t give you working code right now but at least you got enough keywords to Google for now ;)

    # 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 2, 2013 at 5:10 pm

    That last one with `position: absolute` won’t work if window is scrolled. I think it’s nice not to have the non-semantic div, but you’ll need `position: fixed`.

    # 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 6:16 am

    @DADE, that makes sense :)

    # March 3, 2013 at 4:15 pm

    Thanks for the help all!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".