页面内容顶部的预加载器

Preloader on top of page content

本文关键字：加载 顶部      更新时间：2023-09-26

我的Preloader在页面顶部加载，而不是在页面加载之前然后消失。一开始我想让预加载器主导页面。然后在其他东西加载时消失。观点: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;
    }

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);
相关文章：