× İletişim Formu Sayfa Ön Yükleme Eklentisi - 10 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 10 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner-wrap{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center} .loader-balls{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto} .moving-ball{animation-name:loader-balls;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white} .moving-ball:first-child{background-color:#8cc759;animation-delay:0.5s} .moving-ball:nth-child(2){background-color:#8c6daf;animation-delay:0.4s} .moving-ball:nth-child(3){background-color:#ef5d74;animation-delay:0.3s} .moving-ball:nth-child(4){background-color:#f9a74b;animation-delay:0.2s} .moving-ball:nth-child(5){background-color:#60beeb;animation-delay:0.1s} .moving-ball:nth-child(6){background-color:#fbef5a;animation-delay:0s} @keyframes loader-balls{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner-wrap'> <div class='loader-balls'> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> </div> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Sayfa Ön Yükleme Eklentisi - 10" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Sayfa Ön Yükleme Eklentisi - 10 Arlina Design 9/02/2018 Etiketler : CSS3 HTML jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 10 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner-wrap{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center} .loader-balls{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto} .moving-ball{animation-name:loader-balls;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white} .moving-ball:first-child{background-color:#8cc759;animation-delay:0.5s} .moving-ball:nth-child(2){background-color:#8c6daf;animation-delay:0.4s} .moving-ball:nth-child(3){background-color:#ef5d74;animation-delay:0.3s} .moving-ball:nth-child(4){background-color:#f9a74b;animation-delay:0.2s} .moving-ball:nth-child(5){background-color:#60beeb;animation-delay:0.1s} .moving-ball:nth-child(6){background-color:#fbef5a;animation-delay:0s} @keyframes loader-balls{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner-wrap'> <div class='loader-balls'> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> </div> </div> </div> </body> </html>
Yorum Gönder