Question

我的预加载器正在页面顶部加载，而不是在页面加载之前消失。我想预加载器最初支配页面。然后当其他一切都加载时消失。查看：http://www.tenzotea.co

.spinner {
  width: 40px;
 height: 40px;
  background-color: #33cc33;
  position: absolute;
  top: 48%;
  left: 48%;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

    .spinner-wrapper { 
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: 33cc33;
      z-index: 999999;
    }

Answer 1

的CSS

.preloader-container {
  position: fixed;
  z-index: 1031;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  display: block;
  overflow: hidden;
  padding: 25%;
}

.preloader-center {
  position: absolute;
  padding: 15px;
  top: 10%;
  left:30%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: transparent;
  z-index: 1000;
  font-size: 60px;
}
.hidden{
 display:none;

}

Html

<div id="js-busy-loader" class="preloader-container js-busy-loader">
<div class="preloader-center">
  <img src="http://i49.tinypic.com/j5z8mb.gif">
</div>

脚本

(function(){
    $(window).load(function(){
      $("#js-busy-loader").addClass("hidden");
    });
})($,jQuery);

预加载器位于页面内容之上

1 个答案: