× İletişim Formu Sayfa Ön Yükleme Eklentisi - 9 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 9 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{background:#fff;position:fixed;overflow:hidden;left:0;right:0;top:0;bottom:0;z-index:9999} .spinner-wrap{position:absolute;list-style:none;margin:0;padding:0;top:50%;left:50%;transform:translate(-50%,-50%);} .loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite} .loading.reversed li:nth-child(1n){animation-delay:0s} .loading.reversed li:nth-child(2n){animation-delay:0.2s} .loading.reversed li:nth-child(3n){animation-delay:0.4s} .loading li{position:absolute;height:0;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b7ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite} .loading li:nth-child(1n){left:-20px;animation-delay:0s} .loading li:nth-child(2n){left:0;animation-delay:0.2s} .loading li:nth-child(3n){left:20px;animation-delay:0.4s} @keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b9ccd}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner-wrap'> <ul class='loading reversed'> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Sayfa Ön Yükleme Eklentisi - 9" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Sayfa Ön Yükleme Eklentisi - 9 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 9 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{background:#fff;position:fixed;overflow:hidden;left:0;right:0;top:0;bottom:0;z-index:9999} .spinner-wrap{position:absolute;list-style:none;margin:0;padding:0;top:50%;left:50%;transform:translate(-50%,-50%);} .loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite} .loading.reversed li:nth-child(1n){animation-delay:0s} .loading.reversed li:nth-child(2n){animation-delay:0.2s} .loading.reversed li:nth-child(3n){animation-delay:0.4s} .loading li{position:absolute;height:0;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b7ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite} .loading li:nth-child(1n){left:-20px;animation-delay:0s} .loading li:nth-child(2n){left:0;animation-delay:0.2s} .loading li:nth-child(3n){left:20px;animation-delay:0.4s} @keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b9ccd}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner-wrap'> <ul class='loading reversed'> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>
Yorum Gönder