W dzisiejszych czasach oraz dostępnych łączach internetowych... raczej zbędne, ale na pewno zaciekawi :) Zastosować można np przy wczytywaniu jakiegoś "naprawdę sporego" zdjęcia, lub całej strony.
Pre-loader podczas wczytywania strony:
Wstawiamy w HTML'u zaraz po BODY dwie warstwy:
<div id="preloader"><div id="loader"></div></div>
Style CSS3:
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #EEE; z-index: 10000; -webkit-animation-name: prehide; animation-name: prehide; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes prehide { from {opacity: 1;} to {opacity:0;display:none; -webkit-animation-play-state:paused;} } @keyframes prehide { from {opacity: 1;} to {opacity:0;display:none; -webkit-animation-play-state:paused;} } #loader { width: 400px; height: 300px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -150px; background: transparent url('loader.gif') 0 0 no-repeat; }
Kod JQuery:
$('body').css({'overflow':'hidden'});
$(window).load(function(){
$('#loader').fadeOut();
$('#preloader').delay(350).fadeOut(function(){
$('body').delay(350).css({'overflow':'visible'});
});
});
Kolor tła:#635684, Plik: 21,3kb
Kolor tła:#9fe2dd, Plik: 69,4kb
Kolor tła:#d1e5f9, Plik: 34,6kb
Kolor tła:#ffdf01, Plik: 54,0kb
Kolor tła:#abdb89, Plik: 100kb
Kolor tła:#ebdae5, Plik: 36,4kb
↻ do góry « powrót