CSS Loader-generator

Hva er dette verktøyet?

En CSS-loader er et lite animert element — en roterende ring, sprettende prikker, en pulserende sirkel eller en bevegelig fremdriftslinje — som brukes til å vise at innhold laster, uten noen JavaScript-animasjonsløkke og uten bilde eller GIF. Den bygges av noen få CSS-regler pluss en @keyframes-blokk som definerer hvordan elementet beveger seg over tid.

Dette verktøyet genererer fire vanlige loader-mønstre med ekte, fungerende CSS: en roterende kantbasert spinner, tre prikker som spretter i sekvens, en sirkel som pulserer inn og ut, og en linje med en glidende fylling. Juster størrelse, farge og animasjonsvarighet i den direkte forhåndsvisningen, og kopier deretter den genererte CSS-en og det minimale HTML-elementet den gjelder for.

Kilde: CSS Animations Level 1, W3C — spesifikasjonen som definerer @keyframes og animasjonsegenskapene disse loaderne er bygget på.

Hvorfor bruke det?

• Direkte forhåndsvisning animeres i sanntid mens du endrer stil, størrelse, farge eller hastighet — se nøyaktig hva du skal levere.
• Genererer den komplette CSS-en inkludert @keyframes-blokken, ikke bare et utdrag du må fullføre selv.
• Gir også ut den nøyaktige HTML-markeringen CSS-en forventer, så det er ingen gjetning rundt klassenavn eller elementstruktur.
• Fire distinkte animasjonsmønstre (spinner, prikker, puls, linje) dekker de vanligste bruksområdene for lastetilstander.
• Ren CSS-animasjon — ingen JavaScript, ingen bildefiler, mindre og jevnere enn en animert GIF.
• Kjører helt i nettleseren din, gratis, ingen registrering.

Slik bruker du det

1. Velg en loader-stil: roterende ring, sprettende prikker, pulserende sirkel eller fremdriftslinje.
2. Dra størrelsesglidebryteren for å skalere loaderen opp eller ned.
3. Velg en farge — denne blir loaderens aksentfarge (den roterende kanten, prikkene eller linjefyllingen).
4. Juster hastigheten for å gjøre animasjonen raskere eller saktere; de fleste UI-loadere fungerer best mellom 0,6 og 1,5 sekunder per syklus.
5. Kopier den genererte CSS-en inn i stilarket ditt og lim inn HTML-utdraget der du trenger at loaderen skal vises.

Eksempel

Inndata

Stil: roterende ring · Størrelse: 40px · Farge: oransje · 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 ring-spinner: en sirkel med en nesten gjennomsiktig kant på tre sider og en solid farge på den fjerde, rotert kontinuerlig med en lineær, uendelig animasjon.

Hvorfor CSS-loadere fremfor animerte GIF-er

Animerte GIF-spinnere var standarden i årevis, men en CSS-loader er nesten alltid det bedre valget i dag: det er noen hundre byte tekst i stedet for en binær bildefil, den skalerer til hvilken som helst størrelse uten piksellering siden den tegnes med kanter og transformasjoner, og fargen kan endres umiddelbart med én enkelt CSS-variabel i stedet for å eksportere et nytt bilde på nytt.

De fire stilene her — spinner, prikker, puls, linje — er også de som dukker opp oftest i virkelige grensesnitt, fra lastetilstander i knapper til fullskjerms overlegg. Hver av dem bruker bare endringer i transform og opacity i keyframes, noe nettlesere kan animere jevnt på GPU-en uten å hakke resten av siden.

Velge stil for situasjonen

• Roterende ring: det mest nøytrale, generelle valget — fungerer godt inni knapper og små innebygde lastetilstander.
• Sprettende prikker: leses som lettere og mer lekent; vanlig for chat-indikatorer som «skriver...» og korte ventetider.
• Pulserende sirkel: godt egnet som en enkelt lasteindikator eller som en «aktiv/live»-statusprikk.
• Fremdriftslinje: antyder fremdrift og forventes ofte ved sidelastinger eller flertrinnsprosesser, selv uten eksakt prosentandel.

Bruke loaderen i prosjektet ditt

Lim inn den genererte CSS-en i stilarket ditt én gang, og gjenbruk deretter HTML-utdraget der du trenger en lastetilstand — inni en knapp mens et skjema sendes inn, over et kort mens data hentes, eller sentrert i et fullskjerms overlegg. Siden animasjonen er ren CSS, er det like enkelt å slå den av og på som å legge til eller fjerne elementet fra DOM-en, eller skjule det med display: none.

→ Box Shadow-generator · CSS Minifier

Ofte stilte spørsmål