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!
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!!
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.
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.
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.
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.
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.
@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;
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
Give the image a class...it's doesn't matter what, lets say 'loading-image' and do this:
As for the % complete, you can fake it but there is no way to measure it.
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!!
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.
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, 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)
I can't give you working code right now but at least you got enough keywords to Google for now ;)
I appreciate all the help!! Thank you all!
I know it's marked as solved but small tip:
Will only center your image horizontally. What would I do is:
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.
@dade thanks so much!! I'll try this!!
I came across this one day, hope it helps you.
http://jsfiddle.net/jonathansampson/VpDUG/170/
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.
That last one with
position: absolutewon't work if window is scrolled. I think it's nice not to have the non-semantic div, but you'll needposition: fixed.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.
@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:
@DADE, that makes sense :)
Thanks for the help all!