CSS Loader

Saf CSS yükleme animasyonları — spinner, dots, pulse ve bars. Boyut, hız, renk, HTML + CSS kopyala.

GizliTarayıcıdaAnındaLimitsiz

Boyut 36px

Hız 0.8s

Kenarlık 4px

Renk

CSS çıktısı

.easy24-loader {
  width: 36px;
  height: 36px;
  border: 4px solid color-mix(in srgb, #0f6e68 25%, transparent);
  border-top-color: #0f6e68;
  border-radius: 50%;
  animation: easy24-loader-spin 0.8s linear infinite;
}

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

/* HTML */
<div class="easy24-loader"></div>

HTML parçası

<div class="easy24-loader"></div>

Yalnızca CSS animasyonları — JavaScript kütüphanesi yok. Dots ve bars alttaki span işaretlemesini gerektirir.

Önizleme

Nasıl çalışır

Loader tipi seç

Spinner halka, zıplayan dots, nabız daire veya ölçeklenen bars — hepsi CSS keyframe.

Görünüm ve zamanlamayı ayarla

Boyut, animasyon hızı, renk ve spinner kenarlık kalınlığını ayarlayın.

CSS ve HTML kopyala

Canlı önizleyin, gerekli yerlerde CSS ve küçük HTML parçasını kopyalayın veya indirin.

Neden pure CSS loader?

Hafif spinner'lar basit yükleme durumları için animasyon kütüphanelerini bundle etmekten kaçınır.

Neden bu araç

Dört loader stili
Canlı animasyonlu önizleme
Boyut, hız ve renk kontrolleri
Çok elemanlı loader'lar için HTML parçası
Çıktıda keyframe'ler dahil
Sınırsız kullanım — günlük limit yok

Sorular

CSS Loader ne yapar?

JavaScript olmadan herhangi bir sayfaya koyabileceğiniz bağımsız CSS yükleme animasyonları üretir.

Ekstra HTML gerekir mi?

Spinner ve pulse tek div kullanır. Dots ve bars .easy24-loader içinde üç span gerektirir.

Animasyon hızı değiştirilebilir mi?

Evet. Hız kaydırıcısı keyframe süresini saniye cinsinden ayarlar.

Tüm tarayıcılarda çalışır mı?

CSS animasyonları ve color-mix yaygın desteklenir. Eski tarayıcılar spinner track'te color-mix'i yok sayabilir.

CSS'im sunucuya gider mi?

Hayır. Oluşturma tamamen bu tarayıcı sekmesinde çalışır.

Günlük limit var mı?

Hayır. Bu oluşturucu ücretsiz planda sınırsızdır.

Easy24 işine yaradıysa kahve ısmarla

Araçlar tarayıcıda ücretsiz kalır. Kreosus üzerinden tek seferlik destek verirsin. Türkiye kartları geçer.

Kahve ısmarla

Benzer Geliştirici araçları

Tümünü gör

JSON Biçimlendirici

Geliştirici

JSON'u tarayıcıda güzelleştir, küçült, doğrula ve anahtarları sırala. 2 veya 4 boşluk girinti, dosya içe aktarma ve indirme.

Aç

Meta Etiket Üretici

Geliştirici

SEO başlık, açıklama, Open Graph, Twitter Card ve canonical etiketlerini canlı sosyal önizleme ile oluştur. Tarayıcıda çalışır.

Aç

CSS Gradyan Oluşturucu

Geliştirici

Doğrusal ve radyal CSS gradyanları tasarla; üç renk durağına kadar. Canlı önizleme, hazır şablonlar, hex girişi, kopyala veya indir.

Aç