CSS Yükleyici Oluşturucu

Bir yükleyici stili seçin, boyut, renk ve animasyon hızını ayarlayın; bu araç @keyframes kuralı dahil tam CSS'i ve buna karşılık gelen HTML'i oluşturur, böylece animasyon kodunu elle yazmadan çalışan bir yükleme animasyonu kopyalayabilirsiniz.

Bu Araç Nedir?

CSS yükleyici, içeriğin yüklendiğini göstermek için kullanılan küçük bir animasyonlu öğedir — dönen bir halka, zıplayan noktalar, nabız atan bir daire veya hareket eden bir ilerleme çubuğu — JavaScript animasyon döngüsü ya da resim/GIF gerektirmez. Birkaç CSS kuralı ve öğenin zaman içinde nasıl değiştiğini tanımlayan bir @keyframes bloğundan oluşur.

Bu araç, gerçek ve çalışan CSS ile dört yaygın yükleyici deseni üretir: kenarlık tabanlı dönen bir spinner, sırayla zıplayan üç nokta, içe ve dışa nabız atan bir daire ve kayan dolgulu bir çubuk. Canlı önizlemede boyut, renk ve süreyi ayarlayın, ardından oluşturulan CSS'i ve uygulandığı minimum HTML öğesini kopyalayın.

Kaynak: CSS Animations Level 1, W3C — bu yükleyicilerin dayandığı @keyframes ve animasyon özelliklerini tanımlayan spesifikasyon.

Neden Kullanmalısınız?

Stil, boyut, renk veya hızı değiştirdiğinizde canlı önizleme gerçek zamanlı olarak animasyon oynatır — tam olarak neyi kullanacağınızı görürsünüz.
Sadece kendinizin tamamlaması gereken bir parça değil, @keyframes bloğu dahil eksiksiz CSS oluşturur.
CSS'in beklediği tam HTML işaretlemesini de üretir, sınıf adları veya öğe yapısı hakkında tahmin yürütmenize gerek kalmaz.
Dört farklı animasyon deseni (spinner, noktalar, nabız, çubuk) en yaygın yükleme durumu kullanım örneklerini kapsar.
Saf CSS animasyonu — JavaScript yok, resim dosyası yok, animasyonlu bir GIF'ten daha hafif ve akıcı.
Tamamen tarayıcınızda çalışır, ücretsizdir, kayıt gerektirmez.

Nasıl Kullanılır

Bir yükleyici stili seçin: dönen halka, zıplayan noktalar, nabız daire veya ilerleme çubuğu.
Yükleyiciyi büyütmek veya küçültmek için boyut kaydırıcısını sürükleyin.
Bir renk seçin — bu, yükleyicinin vurgu rengi olur (dönen kenarlık, noktalar veya çubuk dolgusu).
Animasyonu hızlandırmak veya yavaşlatmak için hızı ayarlayın; çoğu arayüz yükleyicisi döngü başına 0,6s ile 1,5s arasında en iyi görünür.
Oluşturulan CSS'i stil sayfanıza kopyalayın ve HTML kod parçasını yükleyicinin görünmesi gereken yere yapıştırın.

Örnek

Giriş

Stil: dönen halka · Boyut: 40px · Renk: turuncu · Hız: 1,0s

Çıkış

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Klasik bir halka spinner: üç kenarı neredeyse şeffaf bir kenarlığa, dördüncü kenarı düz bir renge sahip bir daire, doğrusal ve sonsuz bir animasyonla sürekli dönüyor.

Neden animasyonlu GIF yerine CSS yükleyiciler

Animasyonlu GIF spinnerlar yıllarca varsayılan seçenekti, ama bugün bir CSS yükleyici neredeyse her zaman daha iyi bir seçimdir: ikili bir resim dosyası yerine birkaç yüz baytlık metindir, kenarlık ve transform ile çizildiği için piksellenmeden her boyuta ölçeklenir ve rengi yeni bir resim dışa aktarmak yerine tek bir CSS değeriyle anında değiştirilebilir.

Buradaki dört stil — spinner, noktalar, nabız, çubuk — de gerçek arayüzlerde en sık karşılaşılan stillerdir; buton yükleme durumlarından tam sayfa kaplamalara kadar. Her biri keyframes içinde yalnızca transform ve opacity değiştirir, bu da tarayıcıların sayfanın geri kalanını yormadan GPU üzerinde akıcı bir şekilde animasyon oluşturmasını sağlar.

Duruma göre stil seçmek

Dönen halka: en nötr, genel amaçlı seçim — butonların içinde ve küçük satır içi yükleme durumlarında iyi çalışır.
Zıplayan noktalar: daha hafif ve eğlenceli görünür; sohbetlerde 'yazıyor...' göstergeleri ve kısa bekleyişler için yaygındır.
Nabız daire: tek öğeli bir yükleme göstergesi olarak veya 'aktif/canlı' durum noktası olarak iyidir.
İlerleme çubuğu: ileriye doğru hareket çağrıştırır ve tam bir yüzde olmasa bile sayfa yüklemelerinde veya çok adımlı süreçlerde genellikle beklenir.

Yükleyiciyi projenizde kullanmak

Oluşturulan CSS'i bir kez stil sayfanıza yapıştırın, ardından HTML kod parçasını bir yükleme durumuna ihtiyaç duyduğunuz her yerde yeniden kullanın — bir form gönderilirken buton içinde, veri çekilirken bir kart üzerinde ya da tam sayfa bir kaplamanın ortasında. Animasyon saf CSS olduğu için açıp kapatmak, öğeyi DOM'a eklemek veya çıkarmak kadar, ya da display: none ile gizlemek kadar basittir.

→ Kutu Gölgesi Oluşturucu · CSS Küçültücü

Sıkça Sorulan Sorular

Bu yükleyiciler JavaScript olmadan çalışır mı?

Evet — buradaki her yükleyici tamamen CSS @keyframes ve animation özelliğiyle animasyonludur. JavaScript yalnızca bir olaya bağlı olarak (form gönderimi veya bir isteğin tamamlanması gibi) yükleyiciyi gösterip gizlemek istediğinizde gerekir.

Oluşturulan CSS neden bir @keyframes bloğu içeriyor?

CSS animasyonlarının iki bölüme ihtiyacı vardır: öğenin temel stilleri (boyut, renk, şekil) ve bu stillerin animasyon süresi boyunca nasıl değiştiğini tanımlayan bir @keyframes kuralı. Animasyonun çalışması için ikisi de gereklidir, bu yüzden bu araç her zaman yalnızca temel stil yerine tam çifti oluşturur.

Aynı sayfada birden fazla yükleyici stili kullanabilir miyim?

Evet. Her stil kendine özgü, benzersiz adlandırılmış CSS sınıfları ve keyframes üretir (örneğin css-loader-spinner ve css-loader-dots), böylece birden fazla stili çakışma olmadan aynı stil sayfasına kopyalayabilirsiniz.

Yükleyici animasyonu sayfamı yavaşlatır mı?

Hayır — dört stil de yalnızca transform ve opacity'yi animasyonlu hale getirir; tarayıcılar bunu düzen yeniden hesaplaması tetiklemeden compositor/GPU üzerinde işleyebilir. Bu, width veya top gibi özellikleri doğrudan animasyonlu hale getirmenin aksine, daha düşük güçlü cihazlarda bile akıcı kalmasını sağlar.

Yükleyicinin rengini daha sonra yeniden oluşturmadan nasıl değiştiririm?

Kopyalanan CSS'i açın ve renk değerini doğrudan değiştirin — stile bağlı olarak (border-top-color, background veya benzeri) kural boyunca tekrarlanmak yerine yalnızca bir kez görünür, böylece tek bir bul-değiştir onu her yerde günceller.