Ladeanimations-Generator

Baue CSS-Loader, Spinner und Fortschrittsanimationen mit Live-Vorschau und kopierfertigem Code

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

visibility Live preview

Pure CSS (plus a tiny timer for percent / progress). No animation libraries.

code Export

.ugld{--s:64px;--c:#22d3ee;--bg:#0b1020;--sp:0.9s;--t:4px;--n:5;--r:28px;--p:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--c);font-family:system-ui,sans-serif}
.ugld-text{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
@media (prefers-reduced-motion:reduce){.ugld *{animation-duration:1.6s!important}}
.ugld-spin{width:var(--s);height:var(--s);border:var(--t) solid color-mix(in srgb,var(--c) 22%,transparent);border-top-color:var(--c);border-radius:50%;animation:ugld-spin var(--sp) linear infinite}
@keyframes ugld-spin{to{transform:rotate(360deg)}}

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Eine Ladeanimation sagt jemandem, dass die App arbeitet statt eingefroren zu sein. Dieser Generator baut CSS-Spinner, Punkte, Balken, Skeletons, Orbits und Neon-Ringe und lässt dich Farbe, Größe und Tempo in einer Live-Vorschau setzen. Du kannst den Loader auch auf ein Fake-Webpage-Chrom legen, um den Maßstab zu beurteilen. Kopiere HTML und CSS oder lade ein ZIP herunter. Prozent- und Fortschrittsstile fügen ein paar Zeilen JavaScript nur hinzu, wenn du einen laufenden Wert brauchst.

So verwendest du dieses Tool

  1. Einen Loader wählenSpinner, Punkte, Welle, Equalizer, Skeleton, Cube, Neon und mehr.
  2. Farbe und Bewegung justierenGröße, Farbe, Dicke, Tempo, optionale Beschriftung wie Bitte warten.
  3. Vorschau und ExportNutze Vorschau auf Website, um ihn über einem Mock-Layout zu sehen, dann kopiere HTML und CSS.

Warum es nutzen

  • Zwanzig Loader-Stile inklusive Skeleton, Orbit und kreisförmigem Fortschritt.
  • Optionale Beschriftung, damit das Warten einen Satz hat, nicht nur einen Spinner.
  • Website-Vorschau, damit du die Größe gegen eine Fake-Seite beurteilen kannst.
  • CSS-first-Ausgabe. Keine Animationsbibliothek zum Installieren.

Häufige Anwendungen

  • Ein Overlay auf Seitenebene, während Daten laden.
  • Ein Button-Spinner für einen langsamen Submit.
  • Ein Skeleton-Block für eine Karte, die noch nicht da ist.

Fehler, die du vermeiden solltest

  • Einen Spinner für Arbeit zu zeigen, die in unter etwa 300 ms fertig ist. Der Blitz liest sich als Glitch - rendere das Ergebnis direkt.
  • Einen Spinner zu nutzen, wo ein Skeleton hingehört. Wenn du die Form dessen kennst, was lädt, fühlt sich ein Skeleton etwa doppelt so schnell an.
  • Einen Prozentbalken zu animieren, der nicht an echten Fortschritt gebunden ist. Ein Balken, der bei 90 Prozent stehen bleibt, ist schlechter als keiner.
  • Kein barrierefreies Label zu lassen. Ein nackter Spinner sagt einem Screenreader nichts - behalte role="status" und sein Label.
  • Einen schweren Blur- oder Filter-Loader vollflächig auf Mobil zu fahren, was mehr Frames kosten kann als die Arbeit, auf die gewartet wird.

Häufig gestellte Fragen

Es sind CSS (und ein wenig JavaScript für Prozent oder Fortschritt). Das hält sie auf jedem Bildschirm scharf und leicht umzufärben.

Ja. Schalte die Beschriftung ein und tippe Laden, Bitte warten, Verarbeitung oder etwas anderes.

Nein. Es ist ein Mock-Browserrahmen auf dieser Seite, damit du den Maßstab siehst. Nichts wird an einen Server gesendet.

Ja. Das kopierte Snippet gehört dir zur Nutzung in Kunden- und kommerziellen Projekten.

Andere suchen auch nach

  • css loading spinner generator
  • ladeanimation css copy paste
  • skeleton loader css
  • css preloader generator kostenlos
  • fortschrittsbalken css animation
  • reiner css loader ohne javascript
  • loading dots animation css

Related guides