Center Inhalt und Bild Preloader

Question

Ich versuche, meine Preload Spinner in der Mitte der Seite zu zentrieren und das Bild zu zentrieren in den Spinner, scheint der Spinner nach rechts etwa 50px. Nicht sicher, warum es einen Offset zu haben scheint. Ich mag auch das Logo nicht in

$(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

Dies geschieht zu drehen, weil Ihr loader-Logo auch eine Höhe und Breite von 100 Pixel hat, die eine Verschiebung des Laders Logo vom Zentrum verursacht.

$(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

eine Transformations Eigenschaft verwenden, um die Offset- und das Logo als Hintergrund zu beheben und zentriert Code unten nach bearbeiten sehen.

$(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>