× İletişim Formu Sayfa Ön Yükleme Eklentisi - 2 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 2 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(10,10,10,1); z-index:1000 } .loader-spinner{ position:fixed; width:100%; top:70%; height:30px; text-align:center; font-size:10px } .loader-spinner,.loader-spinner-inner{ position:absolute; top:0; bottom:0; right:0; left:0; border:9px solid white; border-color:transparent white; margin:auto } .loader-spinner{ width:85px; height:85px; -webkit-animation:spin 2.2s linear 0s infinite normal; -moz-animation:spin 2.2s linear 0s infinite normal; animation:spin 2.2s linear 0s infinite normal } .loader-spinner-inner{ width:40px; height:40px; -webkit-animation:spinback 1.2s linear 0s infinite normal; -moz-animation:spinback 1.2s linear 0s infinite normal; animation:spinback 1.2s linear 0s infinite normal } @-webkit-keyframes spin{ from{ -webkit-transform:rotate(0) } to{ -webkit-transform:rotate(360deg) } } @-moz-keyframes spin{ from{ -moz-transform:rotate(0) } to{ -moz-transform:rotate(360deg) } } @keyframes spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } } @-webkit-keyframes spinback{ from{ -webkit-transform:rotate(0) } to{ -webkit-transform:rotate(-360deg) } } @-moz-keyframes spinback{ from{ -moz-transform:rotate(0) } to{ -moz-transform:rotate(-360deg) } } @keyframes spinback{ from{ transform:rotate(0) } to{ transform:rotate(-360deg) } } /*]]>*/ </style> </head> <body> <div id="PreLoader"> <div class="loader-spinner"> <div class="loader-spinner-inner"></div> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Sayfa Ön Yükleme Eklentisi - 2" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Sayfa Ön Yükleme Eklentisi - 2 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 2 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(10,10,10,1); z-index:1000 } .loader-spinner{ position:fixed; width:100%; top:70%; height:30px; text-align:center; font-size:10px } .loader-spinner,.loader-spinner-inner{ position:absolute; top:0; bottom:0; right:0; left:0; border:9px solid white; border-color:transparent white; margin:auto } .loader-spinner{ width:85px; height:85px; -webkit-animation:spin 2.2s linear 0s infinite normal; -moz-animation:spin 2.2s linear 0s infinite normal; animation:spin 2.2s linear 0s infinite normal } .loader-spinner-inner{ width:40px; height:40px; -webkit-animation:spinback 1.2s linear 0s infinite normal; -moz-animation:spinback 1.2s linear 0s infinite normal; animation:spinback 1.2s linear 0s infinite normal } @-webkit-keyframes spin{ from{ -webkit-transform:rotate(0) } to{ -webkit-transform:rotate(360deg) } } @-moz-keyframes spin{ from{ -moz-transform:rotate(0) } to{ -moz-transform:rotate(360deg) } } @keyframes spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } } @-webkit-keyframes spinback{ from{ -webkit-transform:rotate(0) } to{ -webkit-transform:rotate(-360deg) } } @-moz-keyframes spinback{ from{ -moz-transform:rotate(0) } to{ -moz-transform:rotate(-360deg) } } @keyframes spinback{ from{ transform:rotate(0) } to{ transform:rotate(-360deg) } } /*]]>*/ </style> </head> <body> <div id="PreLoader"> <div class="loader-spinner"> <div class="loader-spinner-inner"></div> </div> </div> </body> </html>
Yorum Gönder