⏳ CSS Loader Generator

Generate CSS loading spinner animations with live preview. Choose from dots, rings, bars, and more. Copy pure CSS — no JavaScript needed. Free CSS loader generator.

Color

Size: 40px

Speed: 0.8s

CSS

HTML

How to Use

Choose a loader type

Click one of the 6 type buttons: Spinner, Dots, Bars, Ring, Pulse, or Bounce.

Customize appearance

Set the color using the color picker, adjust size with the slider, and set animation speed.

Copy the code

Click Copy Code to copy both the CSS and HTML markup. Paste into your project.

Frequently Asked Questions

What is a CSS loader? +

A CSS loader (also called a spinner or loading indicator) is a pure CSS animation that shows users content is loading. Using CSS instead of GIFs gives you smaller file sizes, smoother animations, and easy customization.

How do I center a CSS spinner on the page? +

Use flexbox: add display:flex; justify-content:center; align-items:center; height:100vh; to the container. Or use position:fixed with top:50%; left:50%; transform:translate(-50%,-50%) on the loader itself.

What animation properties are used in CSS loaders? +

@keyframes defines the animation frames. animation sets the name, duration, iteration count (infinite), and timing function. transform:rotate() creates spinning, and opacity changes create pulse effects.

Can I use these CSS loaders in React or Vue? +

Yes — copy the CSS into your stylesheet and the HTML into your component. In React, convert class to className. For Vue, use the HTML directly in your template.

What is the performance impact of CSS animations? +

CSS animations using transform and opacity are GPU-accelerated and have minimal performance impact. Avoid animating properties like width, height, top, or left as they trigger layout reflows and are more expensive.

Tam Rehber: CSS Yükleyici Oluşturucu

Yükleme göstergeleri — spinner'lar, ilerleme çubukları ve iskelet ekranlar — algılanan performansın kritik bir parçasıdır. CSS tabanlı yükleyiciler, tarayıcının compositor thread'inde çalıştığından JavaScript thread meşgulken bile akıcı kalır.

CSS Animasyon vs JavaScript Animasyon Performansı

Yalnızca transform ve opacity özelliklerini canlandırmak, Layout ve Paint aşamalarını atlayarak doğrudan Composite'e gider — tutarlı 60fps animasyonlar sunar. width, height, background-color gibi özellikleri canlandırmak tüm boru hattını yeniden hesaplamaya zorlar.

Klasik CSS Spinner: Kenarlık Hilesi

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  animation: don 0.8s linear infinite;
}

@keyframes don {
  to { transform: rotate(360deg); }
}

Spinner'lar için Zamanlama Fonksiyonları

Spinner'lar için linear kullanın — sabit hız, sürekli bir dönüş için doğal görünür. ease-in-out gibi yumuşatma fonksiyonları her döngüde hızlanıp yavaşladığından doğal hissettirmez.

İskelet Yükleyiciler vs Spinner'lar

Spinner'lar, son düzenin bilinmediği kısa işlemler (3 saniyenin altı) için en iyisidir. İskelet yükleyiciler — beklenen içerik düzenini taklit eden gri yer tutucu şekiller — içerik ağırlıklı sayfalar için daha uygundur. Araştırmalar, iskelet yükleyicilerin algılanan bekleme süresini azalttığını göstermektedir.

prefers-reduced-motion: Erişilebilirlik

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    opacity: 0.6;
  }
}

Yükleyici konteynerleri için gölge ve derinlik eklemek amacıyla Box Shadow Oluşturucu'ya, buzlu cam arka plan için CSS Camlaşma oluşturucusuna bakın.