CSS-loader-generator

Hvad er dette værktøj?

En CSS-loader er et lille animeret element — en roterende ring, hoppende prikker, en pulserende cirkel eller en bevægelig fremdriftslinje — brugt til at vise, at indhold indlæses, uden JavaScript-animationsløkke og uden billede eller GIF. Den bygges af nogle få CSS-regler plus en @keyframes-blok, der definerer, hvordan elementet bevæger sig over tid.

Dette værktøj genererer fire almindelige loader-mønstre med reel, fungerende CSS: en roterende kant-baseret spinner, tre prikker der hopper i rækkefølge, en cirkel der pulserer ind og ud, og en bjælke med en glidende fyldning. Justér størrelse, farve og animationsvarighed på den live forhåndsvisning, og kopiér derefter den genererede CSS og det minimale HTML-element, den anvendes på.

Kilde: CSS Animations Level 1, W3C — specifikationen, der definerer @keyframes og de animationsegenskaber, disse loaders er bygget af.

Hvorfor bruge det?

• Live forhåndsvisning animerer i realtid, når du ændrer stil, størrelse, farve eller hastighed — se præcis, hvad du sender i produktion.
• Genererer den komplette CSS inklusive @keyframes-blokken, ikke bare et udsnit, du selv skal færdiggøre.
• Producerer også den præcise HTML-markup, CSS'en forventer, så der er ingen gætteri om klassenavne eller elementstruktur.
• Fire distinkte animationsmønstre (spinner, prikker, puls, bjælke) dækker de mest almindelige loading-tilstands-anvendelser.
• Ren CSS-animation — intet JavaScript, ingen billedfiler, mindre og glattere end en animeret GIF.
• Kører helt i din browser, gratis, ingen tilmelding.

Sådan bruger du det

1. Vælg en loader-stil: roterende ring, hoppende prikker, pulserende cirkel eller fremdriftslinje.
2. Træk størrelses-skyderen for at skalere loaderen op eller ned.
3. Vælg en farve — denne bliver loaderens accentfarve (den roterende kant, prikkerne eller bjælkens fyldning).
4. Justér hastigheden for at gøre animationen hurtigere eller langsommere; de fleste UI-loaders fungerer bedst mellem 0,6 og 1,5 sekunder pr. cyklus.
5. Kopiér den genererede CSS ind i dit stylesheet, og indsæt HTML-udsnittet der, hvor loaderen skal vises.

Eksempel

Input

Stil: roterende ring · Størrelse: 40px · Farve: orange · Hastighed: 1,0s

Output

.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 ring-spinner: en cirkel med en næsten gennemsigtig kant på tre sider og en solid farve på den fjerde, roteret kontinuerligt med en lineær, uendelig animation.

Hvorfor CSS-loaders frem for animerede GIF'er

Animerede GIF-spinnere var standarden i årevis, men en CSS-loader er næsten altid det bedre valg i dag: det er et par hundrede bytes tekst i stedet for en binær billedfil, den skalerer til enhver størrelse uden pixelering, da den tegnes med kanter og transforms, og dens farve kan ændres øjeblikkeligt med en enkelt CSS-værdi i stedet for at eksportere et nyt billede.

De fire stile her — spinner, prikker, puls, bjælke — er også dem, der dukker op oftest i rigtige grænseflader, fra loading-tilstande i knapper til fuldsides-overlays. Hver bruger kun ændringer af transform og opacity i sine keyframes, hvilket browsere kan animere jævnt på GPU'en uden at hakke resten af siden.

At vælge en stil til situationen

• Roterende ring: det mest neutrale, alsidige valg — fungerer godt inde i knapper og små inline loading-tilstande.
• Hoppende prikker: opleves lettere og mere legende; almindelig til chat-'skriver...'-indikatorer og korte ventetider.
• Pulserende cirkel: god til en enkelt loading-indikator eller som en 'aktiv/live'-statusprik.
• Fremdriftslinje: antyder fremadgående bevægelse og forventes ofte til sideindlæsninger eller flertrinsprocesser, selv uden nøjagtig procentvisning.

Brug af loaderen i dit projekt

Indsæt den genererede CSS i dit stylesheet én gang, og genbrug derefter HTML-udsnittet, hvor som helst du har brug for en loading-tilstand — inde i en knap, mens en formular indsendes, over et kort, mens data hentes, eller centreret i et fuldsides-overlay. Da animationen er ren CSS, er det lige så simpelt at slå den til og fra som at tilføje eller fjerne elementet fra DOM'en, eller skjule det med display: none.

→ Box Shadow-generator · CSS Minifier

Ofte stillede spørgsmål