CSS Loader-generator

Välj en laddarstil, justera storlek, färg och animationshastighet, så genererar det här verktyget den fullständiga CSS:en — inklusive @keyframes-regeln — plus den matchande HTML-markupen, så du kan kopiera en fungerande laddningsanimation utan att skriva någon animationskod för hand.

Vad är detta verktyg?

En CSS-laddare är ett litet animerat element — en snurrande ring, studsande prickar, en pulserande cirkel eller en rörlig förloppsstapel — som används för att visa att innehåll laddas, utan någon JavaScript-animationsloop och utan bild eller GIF. Den byggs av ett par CSS-regler plus ett @keyframes-block som definierar hur elementet rör sig över tid.

Det här verktyget genererar fyra vanliga laddningsmönster med riktig, fungerande CSS: en roterande ramkantsbaserad spinner, tre prickar som studsar i sekvens, en cirkel som pulserar in och ut, och en stapel med en glidande fyllning. Justera storlek, färg och animationslängd i den levande förhandsvisningen, kopiera sedan den genererade CSS:en och det minimala HTML-elementet den appliceras på.

Källa: CSS Animations Level 1, W3C — specifikationen som definierar @keyframes och animationsegenskaperna som dessa laddare är byggda på.

Varför använda det?

Förhandsvisning live animerar i realtid när du ändrar stil, storlek, färg eller hastighet — se exakt vad du kommer att leverera.
Genererar den kompletta CSS:en inklusive @keyframes-blocket, inte bara ett utdrag du måste färdigställa själv.
Ger även ut den exakta HTML-markupen CSS:en förväntar sig, så det blir ingen gissning kring klassnamn eller elementstruktur.
Fyra distinkta animationsmönster (spinner, prickar, puls, stapel) täcker de vanligaste laddningstillstånden.
Ren CSS-animation — ingen JavaScript, inga bildtillgångar, mindre och smidigare än en animerad GIF.
Körs helt i din webbläsare, gratis, ingen registrering.

Så använder du det

Välj en laddarstil: snurrande ring, studsande prickar, pulserande cirkel eller förloppsstapel.
Dra i storleksreglaget för att skala laddaren upp eller ner.
Välj en färg — den blir laddarens accentfärg (den snurrande ramkanten, prickarna eller stapelfyllningen).
Justera hastigheten för att göra animationen snabbare eller långsammare; de flesta UI-laddare läses bäst mellan 0,6 och 1,5 sekunder per cykel.
Kopiera den genererade CSS:en till din stilmall och klistra in HTML-utdraget varhelst du behöver laddaren visas.

Exempel

Inmatning

Stil: snurrande ring · Storlek: 40px · Färg: orange · Hastighet: 1,0s

Resultat

.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); }
}

En klassisk ringspinner: en cirkel med en nästan transparent ramkant på tre sidor och en solid färg på den fjärde, roterad kontinuerligt med en linjär, oändlig animation.

Varför CSS-laddare istället för animerade GIF:er

Animerade GIF-spinners var standardvalet i åratal, men en CSS-laddare är nästan alltid det bättre valet idag: det är några hundra bytes text istället för en binär bildfil, den skalar till valfri storlek utan pixlighet eftersom den ritas med ramkanter och transformationer, och dess färg kan ändras direkt med en enda CSS-variabel istället för att exportera om en ny bild.

De fyra stilarna här — spinner, prickar, puls, stapel — är också de som förekommer oftast i verkliga gränssnitt, från knapparnas laddningstillstånd till helsideövertäckningar. Var och en använder bara transform- och opacity-ändringar i sina keyframes, vilket webbläsare kan animera smidigt på GPU:n utan att hacka resten av sidan.

Att välja en stil för situationen

Snurrande ring: det mest neutrala, allmänna valet — fungerar bra inuti knappar och små inline-laddningstillstånd.
Studsande prickar: läses som lättare och mer lekfullt; vanligt för chatt-"skriver..."-indikatorer och korta väntetider.
Pulserande cirkel: bra för en enskild laddningsindikator eller som en "aktiv/live"-statuspunkt.
Förloppsstapel: antyder framåtrörelse och förväntas ofta för sidladdningar eller flerstegsprocesser, även utan exakt procentsats.

Att använda laddaren i ditt projekt

Klistra in den genererade CSS:en i din stilmall en gång, återanvänd sedan HTML-utdraget varhelst du behöver ett laddningstillstånd — inuti en knapp medan ett formulär skickas, över ett kort medan data hämtas, eller centrerad i en helsideövertäckning. Eftersom animationen är ren CSS är det lika enkelt att slå på och av den som att lägga till eller ta bort elementet från DOM:en, eller dölja det med display: none.

→ Box Shadow-generator · CSS-minifierare

Vanliga frågor

Fungerar de här laddarna utan JavaScript?

Ja — varje laddare här animeras helt med CSS @keyframes och animation-egenskapen. JavaScript behövs bara om du vill visa eller dölja laddaren baserat på en händelse, som en formulärinlämning eller att ett fetch-anrop avslutas.

Varför inkluderar den genererade CSS:en ett @keyframes-block?

CSS-animationer behöver två delar: elementets grundstilar (storlek, färg, form) och en @keyframes-regel som beskriver hur de stilarna ändras under animationens varaktighet. Båda krävs för att animationen ska köras, så det här verktyget genererar alltid det kompletta paret istället för bara en grundstil.

Kan jag använda mer än en laddarstil på samma sida?

Ja. Varje stil genererar sina egna unikt namngivna CSS-klasser och keyframes (till exempel css-loader-spinner och css-loader-dots), så du kan kopiera flera stilar till samma stilmall utan att de krockar.

Kommer laddningsanimationen att sakta ner min sida?

Nej — alla fyra stilarna animerar bara transform och opacity, vilket webbläsare kan hantera på kompositorn/GPU:n utan att utlösa layoutomberäkning. Detta håller dem smidiga även på svagare enheter, till skillnad från att animera egenskaper som width eller top direkt.

Hur ändrar jag laddarens färg senare utan att generera om den?

Öppna den kopierade CSS:en och ändra färgvärdet direkt — det förekommer bara en gång (som border-top-color, background eller liknande beroende på stil) istället för att duplicerats genom hela regeln, så en enda sök-och-ersätt uppdaterar det överallt det används.