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. CSS Loader, Easy24’ün geliştirici araçlarından biridir. Normal kullanımda girdin bu sekmede kalır; Easy24 bu içeriği işlemek için yüklemez. Bu aracın günlük ücretsiz plan tavanı yoktur; istediğin kadar kullan. Tipik akış: Loader tipi seç, boyut hız ve rengi ayarla, CSS ve HTML parçasını kopyala veya paketi indir. Takip adımı yaygınsa sayfada ilgili araçlar ve ters dönüşümler görü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.

Easy24 işine yaradıysa kahve ısmarla

Araçlar ücretsiz kalır. Teşekkür etmek istersen tek seferlik bağış yapabilirsin.

Kahve ısmarla

CSS Loader ne zaman kullanılır

CSS Loader, Easy24 kataloğunda odaklı bir sayfa olarak durur: tek iş, net kontroller ve kota varsa dürüst bir ücretsiz plan rozeti. Saf CSS yükleme animasyonları: spinner, dots, pulse ve bars. Daha hızlı ilerlemek için ön ayarları kullanın, tasarım sistemi veya bilet tam sayı istediğinde değerleri ince ayarlayın. CSS Loader Easy24’te iki dilli olduğu için araç davranışı değişmeden aynı iş akışı İngilizce veya Türkçe çalışır. Buradaki gizlilik varsayılanı tarayıcı önceliklidir: bu iş akışı için süre dolmasını bekleyen bir Easy24 belge gelen kutusu yoktur. Bu sayfanın günlük ücretsiz plan tavanı yoktur; istediğiniz kadar çalıştırabilirsiniz. Bitince ihtiyacınız olanı indirin veya kopyalayın, sonra sekmeyi kapatın. Sayfadaki ilgili araçlar ters dönüşüm veya komşu format gibi yaygın takip adımlarını kapsar. Easy24’te araç sayfaları İngilizce ve Türkçe senkron tutulur; davranış aynı kalır.

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ç