CSS Yükleniyor Animasyonu Üretici (Spinner)

Nasıl çalışır?

Sol panele animasyonun rengini yazın; #2F6FED gibi HEX, rgb(47, 111, 237) ya da hsl(220, 84%, 56%) yazımlarının hepsi tanınır ve seçtiğiniz renk çıktının altında bir renk kutusu olarak gösterilir. Animasyon türü ayarından dört desenden birini seçin, Boyut alanına piksel olarak büyüklüğü yazın; örneğin 48 piksellik dönen halkada kenarlık 6 piksel kalınlığında olur ve bir tur 0,8 saniye sürer. Sağ paneldeki kodun ilk satırı, sayfanıza koyacağınız tek div'i içerir: role="status" ve aria-label sayesinde ekran okuyucular "Yükleniyor" diye okur. Altındaki CSS'i stil dosyanıza yapıştırın; @keyframes kuralı ve sınıf adı birbirine bağlıdır, ikisini birlikte kopyalayın. Kodun sonunda, cihazında hareket azaltma tercihini açmış kullanıcılar için animasyonu üç kat yavaşlatan bir @media bloğu vardır. Bu araç kodu üretir ama canlı oynatmaz; animasyonu görmek için kodu kendi sayfanızda ya da bir kod deneme ortamında açın.

Bu araç css loader, css spinner, css loader generator, loading animasyonu css aramalarıyla da biliniyor.

@keyframes nedir?

@keyframes, bir CSS animasyonunun zaman içindeki aşamalarını tanımlayan kuraldır. Kuralın içine yüzdelerle ya da from/to ile ara noktalar yazılır ve her noktada öğenin nasıl görüneceği belirtilir: 0%'da dönmemiş, 100%'de 360 derece dönmüş gibi. Tarayıcı aradaki kareleri kendisi doldurur. Animasyon, öğeye animation özelliğiyle kuralın adı, süresi ve tekrar sayısı verilerek başlatılır; bu araçta tekrar sonsuzdur.

prefers-reduced-motion nedir?

prefers-reduced-motion, kullanıcının işletim sisteminde hareket azaltma ayarını açıp açmadığını sayfaya bildiren CSS medya sorgusudur. Windows'ta animasyonları kapatma, macOS ve iOS'ta hareketi azaltma, Android'de animasyonları kaldırma ayarı bu değeri reduce yapar. Sayfa bu durumda büyük ve hızlı hareketleri kısmalı ya da kaldırmalıdır; erişilebilirlik kılavuzu WCAG bunu önerir.

CSS animasyonu ile GIF yükleme görseli arasındaki fark nedir?

GIF yükleme görseli sabit bir resim dosyasıdır: indirilmesi gerekir, rengi ve boyutu değiştirilemez, büyütülünce bulanıklaşır ve saydam kenarları koyu zeminde tırtıklı görünür. CSS animasyonu ise birkaç satır koddur; ek dosya indirilmez, renk ve boyut tek sayıyla değişir, her ekran yoğunluğunda keskin kalır ve hareket azaltma tercihine uyabilir. GIF'in tek üstünlüğü, CSS'in giremediği yerlerde, örneğin e-posta gövdesinde çalışmasıdır.

Neden tek div ve neden hareket azaltma bloğu?

Yükleme göstergesi sayfanın en sık eklenip kaldırılan parçasıdır; iç içe beş span'lı bir yapı hem HTML'i kirletir hem de JavaScript'le gösterip gizlerken hata payını artırır. Buradaki dört desenin hepsi tek bir div ile çalışır: halka kenarlıkla, üç nokta gölgeyle (box-shadow), çubuklar üç arka plan şeridiyle, nabız ölçekleme ile çizilir. Görsel dosya, yazı tipi ya da kütüphane indirilmez.

Bazı kullanıcılarda sürekli dönen ya da zıplayan hareket baş dönmesi ve mide bulantısı yapar; bu kişiler işletim sisteminde hareketi azalt ayarını açar ve tarayıcı bunu prefers-reduced-motion ile sayfaya bildirir. Kodun sonundaki blok animasyonu durdurmaz, üç kat yavaşlatır: kullanıcı hâlâ bir şeyin beklendiğini görür ama hızlı hareket ortadan kalkar.

Hangi deseni nerede kullanmalı?

Dönen halka en tanıdık göstergedir; düğme içinde, form gönderilirken ya da sayfa bölümü yüklenirken iyi çalışır, 16-24 piksel gibi küçük boyutlarda da okunur. Zıplayan üç nokta sohbet ve mesaj arayüzlerinde "karşı taraf yazıyor" anlamı taşır; metnin satırına yakın durduğu için kısa beklemelere uyar.

Çubuklar ses, müzik ve veri akışı gibi sürekli süren işleri çağrıştırır. Nabız sakin bir desendir; harita üzerindeki konum işareti ya da canlı yayın göstergesi gibi "burada bir şey olup bitiyor" demek istediğiniz yerlerde kullanılır. Bekleme birkaç saniyeyi aşacaksa hiçbir spinner yeterli değildir: ilerleme çubuğu ya da iskelet (skeleton) görünüm tercih edin.

Sık sorulanlar

CSS ile yükleniyor animasyonu nasıl yapılır?

Sayfaya tek bir div koyun, CSS'te ona boyut ve renk verin, bir @keyframes kuralıyla hareketi tanımlayıp animation özelliğiyle sonsuz döngüye bağlayın. Bu araç dört hazır desen için bu kodun tamamını üretir; renk ve boyutu seçip kopyalamanız yeterlidir.

Yükleme göstergesini nasıl gizlerim?

İş bittiğinde div'i sayfadan kaldırın ya da hidden özniteliği verin. Sürekli sayfada kalan ama görünmeyen bir animasyon işlemciyi boşuna meşgul eder; display: none olan öğenin animasyonu ise çalışmaz.

Animasyonun hızını nasıl değiştiririm?

Koddaki animation satırında saniye cinsinden süre yazar (örneğin 0.8s). Sayıyı küçültürseniz hızlanır, büyütürseniz yavaşlar. Hareket azaltma bloğundaki süreyi de aynı oranda değiştirmeyi unutmayın.

Bu animasyon ekran okuyucuda nasıl duyulur?

div'e eklenen role="status" ve aria-label="Yükleniyor" sayesinde ekran okuyucu bu öğeyi bir durum bildirimi olarak tanır ve etiketini okur. Animasyonun kendisi görsel olduğu için duyulmaz; etiketi sitenizin diline göre değiştirebilirsiniz.