- This topic is empty.
-
AuthorPosts
-
February 25, 2013 at 11:03 am #42959hendrix940Participant
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.comFebruary 25, 2013 at 11:13 am #125978Paulie_DMemberGive 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 #126070hendrix940ParticipantThanks @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 #126111Paulie_DMemberI’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 #126676hendrix940ParticipantI appreciate all the help!! Thank you all!
March 2, 2013 at 11:26 am #126683DADEParticipantI 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 #126688hendrix940Participant@dade thanks so much!! I’ll try this!!
March 2, 2013 at 1:54 pm #126695TylerNYCMemberI came across this one day, hope it helps you.
March 2, 2013 at 2:47 pm #126698DADEParticipantMakes no sense to me, why can’t you use something like this:
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 #126727MerriParticipantWhy 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 #126738DADEParticipant@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 #126788hendrix940ParticipantThanks for the help all!
December 1, 2017 at 1:34 pm #263222ugultopuParticipantThe 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 todocument
.Hence, you need to change the
ajaxStart()
andajaxStop()
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"); } });
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.