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

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.