Overlay Spinner CSS Oluşturucu

İki parça: spinner ve katman

Oluşturucu spinner’ı üretir: .loader sınıfını ve @keyframes spin kuralını. Katman ise sizin eklediğiniz ayrı bir sarmalayıcıdır. Görüntü alanının tamamını kaplar ve alt öğesini ortalar. Bu ayrım yararlıdır, çünkü aynı spinner’ı bir butonda ya da kartta yeniden kullanabilir, sarmalayıcıyı yalnızca engelleyici bir durum gerektiğinde kullanabilirsiniz.

Sarmalayıcı CSS’i

Bunu oluşturulan kuralların altına yapıştırın:

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

<div class="overlay" role="status" aria-label="Yükleniyor">
  <div class="loader"></div>
</div>

inset: 0 ile birlikte position: fixed, katmanı ekranın dört kenarına kadar genişletir. Flex ayarları spinner’ı iki yönde de ortalar. z-index katmanı normal içeriğin üstünde tutar; bu nedenle bir üst bilgi veya modal pencere hâlâ üstte kalıyorsa değeri yükseltin.

Sayfa yerine tek bir alanı kaplamak

Yalnızca bir kart veya tablo yükleniyorsa kapsayıcısına position: relative verin ve sarmalayıcıyı position: absolute yapın:

.panel { position: relative; }
.panel .overlay { position: absolute; }

Sayfanın geri kalanı kullanılabilir kalır ve yalnızca o panel soluklaşır.

Katman rengini sayfaya göre seçin

Koyu bir sayfada, halkanın dış kısmı çok parlamasın diye yapıştırılan yükleyici CSS’indeki iz rengi #eee değerini de değiştirin.

İyi uygulamalar

• İş bittiği anda katmanı kaldırın; aksi halde sayfa kilitli kalır.
• Kısa beklemeler için kullanın. Uzun işlemlerde neler olduğunu açıklayan metin gösterin.
• Katman ve odak yönetimi sizin işaretlemenizdir. Bu araç yalnızca spinner’ı üretir.

Sayfanın kaydırılmasını engelleyin

Sabit bir katman sayfayı gizler, ama arkasındaki sayfa hâlâ fare tekerleği veya dokunmayla kaydırılabilir. Bu önemliyse katman görünürken body öğesine overflow: hidden; ekleyin ve katman kaybolduğunda kaldırın. Kuralı katmanı gösterip gizlediğiniz anla bağlayın; böylece ikisi asla senkron dışı kalmaz.