Come centrare l'immagine nello specifico div in base alla posizione attuale della finestra?

Question

Sto provando a creare animazioni piacevoli durante il caricamento di contenuti utilizzando ajax. Voglio usare l'icona del display durante il ricaricamento di div con "Content", tuttavia non riesco a capire che sia possibile farlo solo con i CSS.

icona dovrebbe:

1. orizzontalmente sempre al centro del div con "Contenuto"
2. verticalmente sempre al centro di "parte visibile del contenuto"
3. dovrebbe stare per tutta l'animazione in verticale centro di "parte visibile del contenuto" durante l'animazione della diapositiva che nasconde il menu.

Se centratura verticale secondo "parte visibile del contenuto" non è possibile, sarebbe bene all'immagine centro secondo finestra del browser.

[EDIT]:

Ecco il mio violino: http://jsfiddle.net/QWB9x/74/ e la parte che probabilmente dovrebbe essere cambiato:

.loading #img_loading { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    display: block; 
} 

Answer 1

Questo funziona meglio per me :)

function loadNewContent(){ 
$(".loaderCont").removeClass("loading") 
} 

$(document).ready(function() { 

$("#hide_button").on("click", function() { 
     $(this).closest(".bottom").toggleClass("left_hided"); 
     $(".loaderCont").toggleClass("left_hided2"); 
}); 

$("#filter1,#filter2,#filter3,#filter4").on("click", function() { 
    $(".loaderCont").addClass("loading"); 
    setTimeout(loadNewContent, 2000); 
}); 
}); 

CSS:

.header { 
    background-color: Green; 
    width: 100%; 
    margin-bottom: 20px; 
    height: 100px; 
} 
.left { 
    background-color: Red; 
    float: left; 
    width: 100px; 
} 
.left_hided .left{ 
    margin-left: -85px; 
} 
.right { 
    background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y; 
    width: calc(100% - 140px); 
    float: right; 
} 

.left_hided .right{ 
    width: calc(100% - 55px); 
} 

input{ 
    float:right; 
} 

.loaderCont { 
    background-color: rgba(255, 0, 0, 0.6); 
    height: 100%; 
    width: calc(100% - 140px); 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: -1; 
} 

.left_hided2 { 
    width: calc(100% - 55px); 
} 

#loader { 
    background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center; 
    position: relative; 
    top: calc(50% - 16px); 
    left: calc(50% - 16px); 
    display: block; 
    height: 32px; 
    width: 32px; 
} 

.loading { 
    z-index: 9001; 
} 

JSFiddle: http://jsfiddle.net/ZRwzr/1/

Answer 2

utilizzo esempio z-index: -

<div style="z-index:100;">loading image</div> 

Answer 3

.loading #img_loading { 
    position: fixed; 
    top: 50%; 
    left: calc(50% + 55px); 
    display: block; 
} 

Quanto sopra risolverà la metà del problema, si ne ed per aggiornare la sinistra in modo dinamico con javascript.

Answer 4

Affinché questo funzioni in base alle proprie esigenze, è necessario utilizzare JavaScript per determinare dove l'immagine di caricamento deve essere posizionata sulla parte visibile utilizzando un div di posizione fisso e quindi riposizionarla quando l'utente ridimensiona la finestra o scorre la finestra quindi è sempre nella posizione desiderata.

$(window).scroll(function() { 
    scrolling(); 
}); 

$(window).resize(function() { 
    scrolling(); 
}); 

scrolling(); 

function scrolling() { 
    var windowHeight = $(window).height(); 
    var scrollTop = $(window).scrollTop(); 
    var offsetTop = $('#thediv')[0].offsetTop; 
    var offsetHeight = $('#thediv')[0].offsetHeight; 

    var offsetWidth = $('#thediv')[0].offsetWidth; 

    var top = offsetTop - scrollTop; 
    top = top < 0 ? 0 : top; 

    var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop); 
    bottom = bottom < 0 ? 0 : bottom; 

    $('.image').css('top', top); 
    $('.image').css('bottom', bottom); 
    $('.image').css('width', offsetWidth); 
} 

Si prega di notare che se si cambia la larghezza del div si avrà sempre bisogno di chiamare la funzione scrolling() in modo che possa ricalcolare la posizione.

Ho anche aggiunto l'immagine di caricamento come immagine di sfondo al div fisso in modo che possiamo usare il CSS per centrarlo.

.image { 
    position: fixed; 
    text-align:center; 
    background-image:url('http://i.stack.imgur.com/FhHRx.gif'); 
    background-repeat:no-repeat; 
    background-position:center center; 
    background-color:rgba(255,255,255,.4); 
} 

Ecco la JSFiddle http://jsfiddle.net/QWB9x/89/

Answer 5

Non c'è bisogno di fare tanto di script per assegnare una posizione. Puoi farlo con semplice css.

Basta rendere il caricatore relativo al suo genitore. Assegna un'altezza e una larghezza e fai la seguente parte css.

.loader {position: relativo; in alto:-metà dell'altezza; a sinistra:-metà della larghezza; margin-top: 50%; margin-left: 50%; } Funziona con tutti i dispositivi