This is my website: http://themescreators.com/seven-host/
I am using a custom loading effect and for some reason it doesn't work well.
This is the code used on the loading effect:
HTML:
<div class="loadingContainer">
<div class="loading">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
CSS:
.loadingContainer {
text-align: center;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
z-index: 1000;
}
.loadingContainer .loading {
display: inline-block;
text-align: center;
}
.loadingContainer .loading > div {
background-color: #21242e;
height: 80px;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.loadingContainer .loading .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.loadingContainer .loading .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.loadingContainer .loading .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.loadingContainer .loading .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.loading i {
width: 52px;
height: 60px;
position: absolute;
left: 50%;
margin-left: -21px;
top: 50%;
margin-top: -30px;
font-size: 60px;
display: inline-block;
}
JS:
jQuery(window).load(function(){
jQuery('.loadingContainer').css({'opacity' : 0 , 'display' : 'none'});
});
In Safari the ".loadingContainer" isn't removed after the page is loaded, so you only see all the page blank. Can somebody help me fixing this?
Check Safari settingsThe webpage might not be compatible with one or more browser settings, which you can turn on or off as needed. From the menu bar in Safari, choose Safari > Settings (or Preferences). Then click Websites, Privacy, or Security to access these settings: Websites settings.
All services are operating normally.
To reset Safari, follow these steps: In the Safari menu, choose 'Preferences...' Click the 'Privacy' button at the top of the new window that appears, and then click the 'Remove All Website Data' button. It will ask you if you are sure you want to remove all data stored by websites on your computer.
Try replacing jQuery(window).load(function(){
with the following
$(document).ready(function() {
// Fadeout the screen when the page is fully loaded
$('.loadingContainer').fadeOut();
});
As far as I know there is no need to specify jquery in the code. In my example jquery will automatically handle the fadeOut()
handler. The rest of the code can be handled by the core Javascript. I also use this code in my website, and it works flawlessly on every operating system (even android).
I can't reproduce your issue. Perhaps did you remove the "loadingcontainer" from your site?
To say about your code, you will need to define the "stretchdelay" animation.
@keyframes stretchdelay {
from {opacity: 0;}
to {opacity: 1;}
}
@-webkit-keyframes stretchdelay {
from {opacity: 0;}
to {opacity: 1;}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With