中心內容和圖像預加載器

Question

我想讓我的預加載微調中心在頁面中間，並獲得圖像中心內部的微調，微調似乎是在右邊約50px。不知道爲什麼它似乎有抵消。我也想標識不旋轉內

$(window).on('load', function() { // makes sure the whole site is loaded 
 
    $('.loaderInner').fadeOut(); // will first fade out the loading animation 
 
    $('#load_cover').delay(400).fadeOut('slow'); 
 
    $('body').delay(400).css({'overflow':'visible'}); 
 
})

#load_cover { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    text-align: center; 
 
    background-color: #000; 
 
    z-index: 1000000; 
 
} 
 

 
.loaderInner { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 

 
.loader-logo{ 
 
\t background-image: url('http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-down-icon.png'); 
 
} 
 

 
.loader { 
 
    border: 4px solid #838383; 
 
    border-radius: 50%; 
 
    border-top: 4px solid #dddddd; 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-animation: spin 0.7s linear infinite; 
 
    animation: spin 0.7s linear infinite; 
 
    box-shadow: 0 0 1px #999; 
 
    filter: blur(0.9px); 
 
    
 
} 
 

 
@-webkit-keyframes spin { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    100% { -webkit-transform: rotate(360deg); } 
 
} 
 

 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
}

<div id="load_cover"> 
 
    <div class="loaderInner"> 
 
    <div class="loader loader-logo"></div> 
 
    </div> 
 
</div>

Answer 1

這是因爲您的裝載機標識也具有的高度和寬度100像素，其 導致裝載機標誌的從中心的轉變。

$(window).on('load', function() { // makes sure the whole site is loaded 
 
    $('.loaderInner').fadeOut(); // will first fade out the loading animation 
 
    $('#load_cover').delay(400).fadeOut('slow'); 
 
    $('body').delay(400).css({'overflow':'visible'}); 
 
})

#load_cover { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    text-align: center; 
 
    background-color: #000; 
 
    z-index: 1000000; 
 
} 
 

 
.loaderInner { 
 
    position: absolute; 
 
    top: calc(50% - 50px); 
 
    left: calc(50% - 50px); 
 
} 
 

 
.loader-logo{ 
 
width: 100px; 
 
transform: rotate(-90deg); 
 
top: calc(50% - 38px); 
 
position: absolute; 
 
left: calc(50% - 70px); 
 
height: 100px; 
 
\t background-image: url('http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-down-icon.png'); 
 
} 
 

 
.loader { 
 
    border: 4px solid #838383; 
 
    border-radius: 50%; 
 
    border-top: 4px solid #dddddd; 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-animation: spin 0.7s linear infinite; 
 
    animation: spin 0.7s linear infinite; 
 
    box-shadow: 0 0 1px #999; 
 
    filter: blur(0.9px); 
 
    
 
} 
 

 
@-webkit-keyframes spin { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    100% { -webkit-transform: rotate(360deg); } 
 
} 
 

 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
}

<div id="load_cover"> 
 
    <div class="loaderInner"> 
 
    <div class="loader"></div> 
 
    <div class="loader-logo"></div> 
 
    </div> 
 
</div>

Answer 2

使用轉換屬性固定偏移 和使用標誌爲背景，中心見下面的代碼編輯後。

$(window).on('load', function() { // makes sure the whole site is loaded 
 
    $('.loaderInner').fadeOut(); // will first fade out the loading animation 
 
    $('#load_cover').delay(400).fadeOut('slow'); 
 
    $('body').delay(400).css({'overflow':'visible'}); 
 
})

#load_cover { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    text-align: center; 
 
    background-color: #000; 
 
    z-index: 1000000; 
 
} 
 

 
.loaderInner { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform:translateX(-50%) translateY(-50%); 
 
} 
 

 
.loader { 
 
    border: 4px solid #838383; 
 
    border-radius: 50%; 
 
    border-top: 4px solid #dddddd; 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-animation: spin 0.7s linear infinite; 
 
    animation: spin 0.7s linear infinite; 
 
    box-shadow: 0 0 1px #999; 
 
    filter: blur(0.9px); 
 
    background:url('http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-down-icon.png') no-repeat center; 
 
} 
 

 
@-webkit-keyframes spin { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    100% { -webkit-transform: rotate(360deg); } 
 
} 
 

 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
}

<div id="load_cover"> 
 
    <div class="loaderInner"> 
 
    <div class="loader loader-logo"></div> 
 
    </div> 
 
</div>