페이지 내용 상단의 프리 로더

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