Generator de Loadere CSS
Generatorul de loadere CSS creează animații de încărcare din CSS pur în șase stiluri — spinner, puncte săltărețe, inel, pulse, bare și inel dublu — cu mărime, culoare, viteză și grosime reglabile, și oferă atât CSS, cât și HTML.
Despre acest instrument
Generatorul de loadere CSS creează animații de încărcare din CSS pur în șase stiluri — spinner, puncte săltărețe, inel, pulse, bare și inel dublu — cu mărime, culoare, viteză și grosime reglabile, și oferă atât CSS, cât și HTML.
Cum se folosește
- Alege un stil de loader.
- Ajustează mărimea, culoarea, viteza și grosimea.
- Verifică previzualizarea live.
- Apasă Copy CSS + HTML și lipește ambele în pagina ta.
Bine de știut
- Loaderele din CSS pur nu au nevoie de imagini, GIF-uri sau JavaScript.
- Spinnerele se rotesc cu @keyframes și transform: rotate(), o animație eficientă.
- Markup-ul este un singur element sau câteva elemente copil pentru puncte și bare.
- Adaugă role="status" și o etichetă ascunsă vizual, precum „Loading…”, ca cititoarele de ecran să anunțe loaderul.
- Ia în considerare încetinirea sau oprirea loaderelor când este activ prefers-reduced-motion.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Cum fac un spinner de încărcare în CSS?
Dă unui element pătrat o bordură cu o singură latură colorată, border-radius: 50% și o animație @keyframes de rotație — sau copiază unul din acest generator.
Loaderele CSS sunt mai bune decât GIF-urile?
De obicei da: sunt mai mici, rămân clare la orice mărime, iar culoarea și viteza lor pot fi schimbate din CSS.
Cum fac un loader accesibil?
Include-l într-un element cu role="status" și adaugă un text ascuns precum „Loading…”, ca tehnologiile asistive să-l poată anunța.
Cum centrez loaderul pe pagină?
Pune-l într-un container cu display: flex; justify-content: center; align-items: center;.