CSS Döner Oluşturucu Özelleştirilebilir stillerle CSS yükleniyor animasyonları ve dönen yükleyiciler oluşturun.

🎨

CSS Döner Oluşturucu

Özelleştirilebilir stillerle CSS yükleniyor animasyonları ve dönen yükleyiciler oluşturun.

Spinner türünü seçin

Border, dots, pulse veya ring spinner stillerinden seçim yapın.

Görünümü özelleştirin

Renk, boyut, kenarlık genişliği ve animasyon hızını ayarlayın.

Kodu kopyalayın

Canlı spinner'ı önizleyin ve HTML ve CSS kodunu kopyalayın.

Loading tool...

What Is CSS Döner Oluşturucu?

CSS Spinner Generator, saf HTML ve CSS kullanarak animasyonlu yükleme göstergeleri oluşturur. Yükleme spinleri, veri getirme, dosya yüklemesi veya sayfa geçişleri gibi eşzamansız işlemler sırasında kullanıcılar için görsel geri bildirim sağlar. Bu araç, dört farklı spinner stili sunar: kenarlı spinner (klasik dönen daire), noktalar (zıplayan noktalar), nabız (genişleyen daire) ve halka (dönen halka). Her stil, renk, boyut, kenar genişliği ve animasyon hızı için kontrollerle tamamen özelleştirilebilir. Oluşturulan kod, hem HTML işaretlemesini hem de @keyframes animasyonu tanımlayan CSS'yi içerir. Tüm spinler hafif, performanslı ve JavaScript veya dış kütüphaneler gerektirmez. Tüm modern tarayıcılar üzerinde çalışırlar ve herhangi bir web projesine kolayca entegre edilebilir.

Why Use CSS Döner Oluşturucu?

Farklı tasarım bağlamları için dört ayrı spinner stili
Saf CSS, JavaScript veya kütüphane bağımlılıkları olmadan
Özelleştirilebilir boyut, renk, hız ve kenarlık genişliği
Oluşturulan kod, HTML ve tam CSS ile birlikte ana kareleri içerir

Common Use Cases

Veri Yükleme Durumları

API'lerden veya veritabanlarından veri alırken spinners gösterin.

Form Gönderme Geri Bildirimi

Form işlemleri sırasında gönderme düğmelerinde bir spinner görüntüleyin.

Sayfa Geçişleri

SPAlarda sayfa gezinmesi veya yol değişiklikleri sırasında spinners kullanın.

İçerik Tembel Yükleme

Görseller veya bileşenler yüklenirken yükleme göstergeleri gösterin.

Technical Guide

CSS spinleri, sürekli hareket oluşturmak için @keyframes animasyonlarını kullanır. Kenarlı spinner tekniği, çoğu tarafta şeffaf kenar ve bir tarafta renkli kenar olan dairesel bir öğe kullanır ve ardından 360 derece döndürür. Noktaların animasyonu, sıralı animation-delay ile zıplayan bir efekt oluşturmak için ölçek dönüşümlerini kullanır. Nabız animasyonu, bir öğeyi 0'dan 1'e ölçeğiyle birlikte opaklığı söndürür. Tüm animasyonlar, animation: ad süre zaman-fonksiyonu iteration-sayısı kullanır. Iteration-sayısını sonsuz olarak ayarlamak, sürekli döngüyü sağlar. Animasyon-zaman-fonksiyonu (ease, linear, ease-in-out) hız eğrisini kontrol eder. Erişilebilirlik için spinlere role="status" ve bir aria-etiket ekleyin. Kullanıcıların azaltılmış hareketi tercih ettiği durumlarda animasyonları devre dışı bırakmak veya azaltmak için prefers-reduced-motion medya sorgusunu kullanmayı düşünün.

Tips & Best Practices

1
Pürüzsüz, sabit döndürme için animation-timing-function: linear kullanın
2
Erişilebilirlik için prefers-reduced-motion medya sorgusunu ekleyin
3
Spinner boyutunu uygun tutun - standart 48px, satır içi için 24px
4
Ekran okuyucu erişilebilirliği için aria-label="Yükleniyor" kullanın

Related Tools

CSS Dönüşüm Oyun Alanı

Dönme, ölçekleme, eğme ve çevirme dahil CSS dönüşümleri ile 3B perspektif deneyimi yaşayın.

🎨 CSS & Design

CSS Animasyon Oluşturucu

Önceden tanımlanmış efektler ve özelleştirilebilir zamanlama ile CSS anahtar kare animasyonları oluşturun.

🎨 CSS & Design

CSS Geçiş Jeneratörü

Özellik, süre, yumuşatma ve hover efektleri ile özelleştirilebilir CSS geçişleri oluşturun.

🎨 CSS & Design

Yazdırma Stil Sayfası Oluşturucu

@media yazdırma stil sayfalarını, öğeleri gizleme, metni stilendirme ve sayfa kesintilerini kontrol etme seçenekleriyle oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q CSS spinners erişilebilir mi?

Spinner öğesine role="status" ve aria-label="Yükleniyor" ekleyin. Ayrıca prefers-reduced-motion tercihlerine saygı gösterin.

Q Döndürme yönünü değiştirebilir miyim?

Evet, @keyframes'den rotate(360deg) yerine rotate(-360deg) kullanarak saat yönünün tersine döndürmeyi sağlayabilirsiniz.

Q Sayfada spinner'ı nasıl merkezleyebilirim?

Ana konteynırda flexbox kullanın: display: flex; justify-content: center; align-items: center

Q CSS spinners eski tarayıcılarda çalışır mı?

CSS animasyonları ve border-radius, IE10+ ve tüm modern tarayıcılar tarafından desteklenmektedir.

Q Animasyon hızını nasıl değiştirebilirim?

Animasyon süresi değerini ayarlayın. Düşük değerler (0.5s) daha hızlı, yüksek değerler (2s) daha yavaş yapar.

About This Tool

CSS Döner Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.