9

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?

4
  • 1
    I can't reproduce the issue, and that code does not appear to be at the link. Commented May 23, 2015 at 23:19
  • can you please tell me you using safari in window? Commented May 26, 2015 at 13:28
  • did you install quick time player? Commented May 26, 2015 at 13:31
  • I can't reproduce it either. It behaves in Safari just like it does in Chrome and Firefox.
    – Cu3PO42
    Commented May 30, 2015 at 15:18

2 Answers 2

1

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).

1
  • Actually, WordPress is using jQuery in noConflict() mode by default, so unless you use anonymous function and provide the $ as a jQuery alias inside you will get a type error.
    – Danijel
    Commented May 27, 2015 at 23:22
1

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;} 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.