Generator CSS Loader

Ce este acest instrument?

Un loader CSS este un mic element animat — un inel rotativ, puncte care sar, un cerc pulsatil sau o bară de progres în mișcare — folosit pentru a arăta că se încarcă conținut, fără buclă de animație JavaScript și fără imagine sau GIF necesar. Este construit din câteva reguli CSS plus un bloc @keyframes care definește cum se mișcă elementul în timp.

Acest instrument generează patru modele comune de loader cu CSS real, funcțional: un spinner rotativ bazat pe margine, trei puncte care sar în secvență, un cerc care pulsează în și afară și o bară cu o umplere glisantă. Ajustează dimensiunea, culoarea și durata animației în previzualizarea live, apoi copiază CSS-ul generat și elementul HTML minimal căruia i se aplică.

Sursă: CSS Animations Level 1, W3C — specificația care definește @keyframes și proprietățile de animație din care sunt construite aceste loadere.

De ce să-l folosești?

• Previzualizarea live animă în timp real pe măsură ce schimbi stilul, dimensiunea, culoarea sau viteza — vezi exact ce vei livra.
• Generează CSS-ul complet, inclusiv blocul @keyframes, nu doar un fragment pe care trebuie să-l termini singur.
• Generează și marcajul HTML exact la care se așteaptă CSS-ul, deci nu ghicești numele claselor sau structura elementelor.
• Patru modele de animație distincte (spinner, puncte, puls, bară) acoperă cele mai comune cazuri de utilizare pentru stări de încărcare.
• Animație CSS pură — fără JavaScript, fără active de imagine, mai mică și mai fluidă decât un GIF animat.
• Rulează complet în browserul tău, gratuit, fără înregistrare.

Cum se folosește

1. Alege un stil de loader: inel rotativ, puncte care sar, cerc pulsatil sau bară de progres.
2. Trage sliderul de dimensiune pentru a scala loader-ul în sus sau în jos.
3. Alege o culoare — aceasta devine culoarea de accent a loader-ului (marginea rotativă, punctele sau umplerea barei).
4. Ajustează viteza pentru a face animația mai rapidă sau mai lentă; majoritatea loaderelor de interfață se citesc cel mai bine între 0,6s și 1,5s pe ciclu.
5. Copiază CSS-ul generat în foaia ta de stiluri și lipește fragmentul HTML oriunde ai nevoie ca loader-ul să apară.

Exemplu

Intrare

Stil: inel rotativ · Dimensiune: 40px · Culoare: portocaliu · Viteză: 1,0s

Rezultat

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

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

Un spinner clasic în formă de inel: un cerc cu o margine aproape transparentă pe trei laturi și o culoare solidă pe a patra, rotit continuu cu o animație liniară, infinită.

De ce loadere CSS în loc de GIF-uri animate

Spinnerele GIF animate au fost implicite ani de zile, dar un loader CSS este aproape întotdeauna alegerea mai bună astăzi: este câteva sute de bytes de text, nu un fișier de imagine binar, se scalează la orice dimensiune fără pixelare, fiind desenat cu margini și transformări, iar culoarea lui poate fi schimbată instant cu o singură variabilă CSS, în loc să re-exporți o imagine nouă.

Cele patru stiluri de aici — spinner, puncte, puls, bară — sunt și cele care apar cel mai frecvent în interfețe reale, de la stări de încărcare a butoanelor la suprapuneri pe toată pagina. Fiecare folosește doar schimbări de transform și opacity în keyframes-urile sale, pe care browserele le pot anima fluid pe GPU, fără să blocheze restul paginii.

Alegerea unui stil pentru situație

• Inel rotativ: alegerea cea mai neutră, cu scop general — funcționează bine în interiorul butoanelor și în stări mici de încărcare inline.
• Puncte care sar: se citește ca mai ușor și mai jucăuș; comun pentru indicatori de tip 'scrie...' în chat și așteptări scurte.
• Cerc pulsatil: bun pentru un indicator de încărcare cu un singur element sau ca un punct de status 'activ/live'.
• Bară de progres: sugerează mișcare înainte și este adesea așteptată pentru încărcări de pagină sau procese cu mai mulți pași, chiar și fără procent exact.

Folosirea loader-ului în proiectul tău

Lipește CSS-ul generat în foaia ta de stiluri o dată, apoi refolosește fragmentul HTML oriunde ai nevoie de o stare de încărcare — în interiorul unui buton în timp ce un formular se trimite, peste un card în timp ce se preiau date, sau centrat într-o suprapunere pe toată pagina. Fiindcă animația este CSS pur, comutarea ei pornit/oprit este la fel de simplă ca adăugarea sau eliminarea elementului din DOM, sau ascunderea lui cu display: none.

→ Generator Box Shadow · Minificator CSS

Întrebări frecvente