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>