Generator loader CSS (spinner de încărcare)

Exemple de loadere CSS

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Spinner clasic Un cerc gri cu o parte colorată care se rotește.

<!-- HTML -->
<div class="loader" role="status" aria-label="Se încarcă"></div>

/* CSS */
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}

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

Trei puncte Punctele cresc pe rând, ca în aplicațiile de chat.

<!-- HTML -->
<div class="loader" role="status" aria-label="Se încarcă"><span></span><span></span><span></span></div>

/* CSS */
.loader {
  display: flex;
  gap: 8px;
}

.loader span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #2563eb;
  animation: loader-dots 1.4s ease-in-out infinite both;
}

.loader span:nth-child(2) {
  animation-delay: 0.22s;
}

.loader span:nth-child(3) {
  animation-delay: 0.45s;
}

@keyframes loader-dots {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Egalizator Bare care urcă și coboară decalat.

<!-- HTML -->
<div class="loader" role="status" aria-label="Se încarcă"><span></span><span></span><span></span><span></span></div>

/* CSS */
.loader {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
}

.loader span {
  width: 6px;
  height: 100%;
  border-radius: 3px;
  background: #7c3aed;
  animation: loader-bars 1s ease-in-out infinite;
}

.loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.loader span:nth-child(3) {
  animation-delay: 0.3s;
}

.loader span:nth-child(4) {
  animation-delay: 0.45s;
}

@keyframes loader-bars {
  0%, 100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

Inel dublu Două arce opuse care se rotesc.

<!-- HTML -->
<div class="loader" role="status" aria-label="Se încarcă"></div>

/* CSS */
.loader {
  width: 56px;
  height: 56px;
  border: 6px solid #16a34a;
  border-color: #16a34a transparent;
  border-radius: 50%;
  animation: loader-spin 1.2s linear infinite;
}

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

Puls Un cerc care crește și dispare, ca o undă.

<!-- HTML -->
<div class="loader" role="status" aria-label="Se încarcă"></div>

/* CSS */
.loader {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f97316;
  animation: loader-pulse 1.2s ease-out infinite;
}

@keyframes loader-pulse {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

Bară de progres Pentru încărcări fără procent cunoscut, sub un antet sau un formular.

<!-- HTML -->
<div class="loader" role="status" aria-label="Se încarcă"></div>

/* CSS */
.loader {
  position: relative;
  width: 160px;
  height: 6px;
  overflow: hidden;
  background: #e2e8f0;
  border-radius: 6px;
}

.loader::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: #2563eb;
  border-radius: inherit;
  animation: loader-line 1.5s ease-in-out infinite;
}

@keyframes loader-line {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

Cum folosești generatorul de loader

Alege tipul: spinner cerc, puncte, bare, inel dublu, puls sau linie de progres.
Setează mărimea, culoarea principală și culoarea secundară.
Reglează viteza (durata unui ciclu, în secunde) și grosimea.
Copiază fragmentul HTML și CSS-ul, care include animația @keyframes.

Cum e făcut un spinner

Cel mai simplu spinner este un cerc cu bordură, în care o singură latură are altă culoare, rotit la infinit cu o animație liniară:

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: roteste 0.8s linear infinite;
}
@keyframes roteste {
  to { transform: rotate(360deg); }
}

Rotația folosește transform, deci rămâne fluidă chiar și când pagina e ocupată cu alte calcule.

Accesibilitate

Un cerc care se învârte nu spune nimic unui cititor de ecran. Pune pe container role="status", care anunță politicos schimbările, și adaugă un text ascuns vizual sau un aria-label:

<div class="loader" role="status">
  <span class="ascuns">Se încarcă...</span>
</div>

.ascuns {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Pentru cine a cerut mai puțină mișcare, încetinește animația sau înlocuiește-o cu un text static.

Afișează loaderul cu întârziere

Dacă datele vin în mai puțin de câteva sute de milisecunde, un loader care clipește scurt e mai deranjant decât niciunul. Afișează-l doar după 300–500 ms, cu un setTimeout sau cu o animație de opacitate care are animation-delay și fill-mode: both.

Întrebări frecvente

Pot folosi loaderul într-un buton?

Da. Setează o mărime mică (16–20px), folosește currentColor pentru culoare ca să preia culoarea textului și pune atributul disabled pe buton cât timp se încarcă.

Cum schimb viteza?

Modifică durata din proprietatea animation. Mai multe despre animații găsești în generatorul de animații CSS.