CSS Yükleyici Oluşturucu
Özel CSS yükleme animasyonları oluşturun.
<div class="loader"></div>.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #D94F30;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Saf CSS yukleme animasyonlari olusturucu
Yukleme animasyonlari (loader veya spinner), herhangi bir modern web uygulamasinda temel gorsel ogelerdir. Icerigin yuklendigi veya sunucu yanitlarinin beklendigi durumlarda kullaniciya gorsel geri bildirim saglar ve kullanici deneyimini ve uygulamanin algilanan hizini onemli olcude iyilestirir.
Olusuturucumuz sekiz farkli loader turu icerir: klasik spinner, ziplayan noktalar, ekolayzir cubuklar, dalgalanan nabiz, donen halka, basamakli kareler, cizgisel ilerleme ve kayar noktalar. Her tur, renk, boyut ve animasyon hizi ayarlariyla tamamen ozellestirilebilir.
Olusturulan kod, harici bagimliliklar olmadan @keyframes animasyonlariyla saf CSS'dir. Hem HTML hem de CSS'i kopyalayabilir ve dogrudan projenize yapistirabilirsiniz. Tum animasyonlar duyarlidir ve herhangi bir cihazda sorunsuz calisir.
Sıkça sorulan sorular
Loader'lar JavaScript kullaniyor mu?
Hayir, tum loader'lar @keyframes animasyonlari kullanan %100 saf CSS'dir. JavaScript gerektirmezler, bu da onlari son derece verimli ve herhangi bir web projesine kolayca uygulanabilir kilar.
Tum tarayicilarla uyumlu mu?
Evet, CSS @keyframes animasyonlari ve kullanilan ozellikler Chrome, Firefox, Safari, Edge ve Opera dahil tum modern tarayicilarla uyumludur. Guncel tarayicilar icin saglayici oneki gerekmez.
Ayni sayfada birden fazla loader kullanabilir miyim?
Evet, ancak farkli loader turleri arasinda stil catismalarini onlemek icin her farkli ornek icin ".loader" sinifini yeniden adlandirdiginizdan emin olun (ornegin, ".spinner-1", ".spinner-2").