Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Fundstück

CSS-Spinners: So schön können Loading-Icons aussehen

(Screenshot: boguz.github.io/Spinners)

Dank CSS3 sind die Möglichkeiten bei der Gestaltung von Ladebalken oder einem Ladestatus fast unendlich. Heute stellen wir eine Seite vor, die ansprechende CSS-Spinners inklusive Code zeigt.

Besonders für eine bessere Usability sind Status-Indikatoren wie Ladebildschirme und Fortschrittsanzeigen von Bedeutung. Sie helfen den Nutzern einer Applikation, die Prozesse hinter den Kulissen ein wenig besser zu verstehen. Insbesondere wenn es darum geht, Wartezeiten auf sich zu nehmen, ist ein aussagekräftiger und ästhetisch ansprechender Indikator ein wichtiger Faktor.

13 CSS-Spinners zum Ausprobieren

So sehen die CSS-Spinners aus. (Screenshot: t3n)
So sehen die CSS-Spinners aus. (Screenshot: t3n)

Die Website CSS-Spinners zeigt 13 verschiedene Lade-Animationen, die aus CSS und HTML bestehen. Nutzen darf sie jeder. Wie die Website, sind auch die einzelnen Animationen im Flat-Style umgesetzt. Du hast die Wahl zwischen Kreisen, Rechtecken oder extravaganten Animationen, wie zum Beispiel flippenden Streifen oder drei unterschiedlich kreisenden Kreisen. Der einfachste Weg, eine Animation in dein Projekt zu übertragen, ist, die gewünschte Animation auf boguz.github.io/Spinners anzuklicken, den Code zu kopieren und in dein Projekt einzufügen. Natürlich kannst du den Code auch direkt von Github kopieren.

Entstanden sind die Animationen aus einer Übung mit CSS3-Animationen, schreibt der Entwickler auf seiner Github-Seite. In seinem Repositorie findet man weitere sehenswerte CSS-Animationen, wie zum Beispiel „Rumuli“ – eine Sammlung von Scroll-Down-Icons.

Auch sehenswert: Inspiration: CSS-Ladebalken und -Animationen für dein Projekt

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot