Nasıl oluşturulur: CSS yükleyici

CSS ile önceden yükleyici oluşturma nasıl öğrenilir.

Kişisel olarak deneyin

Yükleyici nasıl oluşturulur

İlk adım - HTML ekleyin:

<div class="loader"></div>

İkinci adım - CSS ekleyin:

.loader {
  border: 16px solid #f3f3f3; /* Açık gri */
  border-top: 16px solid #3498db; /* Mavi */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Kişisel olarak deneyin

Örnek açıklaması:

belirtilmiştir. özellik belirtilmiştir. Yükleyicinin kenar çerçevesi boyutunu ve renginiborder-radius özellik yükleyiciyi dairesel hale getirir.

taraf çerçevelerinde dönen mavi kısmı border-top özellik belirtilmiştir. Daha fazla "döndürme cihazı" istiyorsanız, ayrıca border-bottom,border-left ve/ya da border-rightbelirtilmiştir.

Yükleyici boyutu, aşağıdaki örnekte görüldüğü gibi width ve height özellik belirtilmiştir.

Son olarak, mavi kısmı 2 saniye süresince daima döndüren bir animasyon ekledik.

Dikkat:desteklemeyenler için animation ve transform özellikli tarayıcılar için, ayrıca bir -webkit- önek. Örneği nasıl çalıştığını görmek için tıklayın.

ek更多的 döndürme cihazı ekle

Örnek

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

Kişisel olarak deneyin

Örnek

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

Kişisel olarak deneyin

Örnek

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

Kişisel olarak deneyin

Başka bir örnek

“Sayfa içeriğini” göstermek için sayfa ortasında yükleyici nasıl konumlandırılır ve yüklenmesi tamamlandığında:

Örnek

Kişisel olarak deneyin