Web sitelerinizde kolaylıkla kullanabileceğiniz 8 adet Css Loader Class‘ını paylaşıma sunuyorum. Wmaracı forumunda görmüş olduğum bu güzel paylaşımdan haberdar olmayan meraklılarının çokca işine yarayacağını düşünüyorum.
Css Loader nedir ?
Class genelde “sayfa yükleniyor…” veya “lütfen bekleyin..” gibi klasik düz yazıların papucunu dama atan veya görsel açıdan şuanki yazılım teknolojisinde tasarımlarda hoş durmayan yükleme çubuklarının yerine geçen kullanımı en kolay Css Loader‘lardır. Umarım işinize yarar. Bu güzel mini arşivi ne olur ne olmaz deyip sizde bilgisayarınızda bulundurun.
Css Loader nasıl kullanılır ?
Hemen örnek kullanımını göstereyim, aşağıdaki css kodlarını sitemizin css klasörüne loader.css olarak atıp index dosyanızın header bölümünde bu css dosyasını çağırıyoruz. En altta vermiş olduğum html kodu ile de bunu çalıştırmış oluyoruz.
8 Adet Css Loader
Buraya tıklayarak diğer class’ların canlı önizlemelerini görebilir <View Source> butonundan kodları alabilirsiniz.
Css:
.loader { font-size: 10px; margin: 5em auto; text-indent: -9999em; width: 11em; height: 11em; border-radius: 50%; background: #ffffff; background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%); position: relative; -webkit-animation: load3 1.4s infinite linear; animation: load3 1.4s infinite linear; } .loader:before { width: 50%; height: 50%; background: #FFF; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .loader:after { background: #0dcecb; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @-webkit-keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
Html:
<div class="loader"></div>
Bu kodu tagları arasına koyunca en üstte duruyor ve birdaha kalkmıyor.Belirlenen süre sonrasında gitmesini nasıl sağlayabilirim ?
Bunun için bir süre belirlemiyoruz, bu div içine aldığınız div yani …diğer divler… ortada ki divler tarayıcı hızına veya internet hızınıza göre yüklenmesi tamamlandığında yükleniyor kısmı sona erer ve arada ki divler ortaya çıkar kullanımı bu şekilde.
Tamam anladım orasını teşekkürler.Peki sitenin tamamını sarmasını nasıl ayarlayabilirim kodu nereye yerleştirmem gerek ?
Örneğin; sitenizin açılış sayfası olan anasayfada bu özelliği aktif etmek istiyorsunuz diyelim. JS dosyasını çağırma işlemini yaptıysanız sitenizin içerik kodlarında örneğin content(içerikler genelde böyle başlar sizde böyle olmayabilir) ile başlayan kısım
açılış etiketi ile kapanış etiketi arasında sitemizin içerikleri bulunur. Bu iki tagın arasında kalan classları loader divinin içinde kalacak şekilde ayarlayabilirsiniz.
Tamam anladım teşekkürler.