Nasıl Yapılır - CSS Yükleyici
CSS ile bir ön yükleyicinin nasıl oluşturulacağını öğrenin.
Yükleyici Nasıl Oluşturulur
Adım 1) HTML'yi ekleyin:
Örnek
<div class="loader"></div>
Adım 2) CSS'yi ekleyin:
Örnek
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Örnek Açıklama
Özellik border
, yükleyicinin kenarlık boyutunu ve kenarlık rengini belirtir. Özellik border-radius
, yükleyiciyi bir daireye dönüştürür.
Kenarlık içinde dönen mavi şey,
border-top
özellik ile belirtilir. Ayrıca border-bottom
, border-left
ve/veya
border-right
daha fazla "döndürücü" istiyorsanız (aşağıdaki örneğe bakın) ekleyebilirsiniz.
Yükleyicinin boyutu width
ve height
özellikleri ile belirtilir.
animation
Son olarak, mavi şeyi 2 saniyelik bir animasyon hızıyla sonsuza kadar döndüren bir ekliyoruz .
Not: Animasyon ve dönüştürme özelliklerini desteklemeyen tarayıcılar için bir -webkit- öneki de eklemelisiniz. Nasıl olduğunu görmek için örneğe tıklayın.
Daha fazla döndürücü ekle
Örnek
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Örnek
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Örnek
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Başka bir örnek
Yükleyicinin sayfanın ortasına nasıl yerleştirileceğine ve yükleme tamamlandığında "sayfa içeriğinin" nasıl gösterileceğine dair bir örnek: