Daniel Hundt - Erfahrung Technologien im Frontend

zurück zur Technologie-Übersicht

Und sie dreht sich doch...nicht - Ladeanimation mit Hindernissen

Inhalt

Ladeanzeige
Die Ladeanzeige dreht sich nun (hoffentlich) auch per CSS 3 Transition korrekt

Da die Ladeanimation nicht "klassisch" per gif realisiert werden sollte, sondern als sich drehendes Sonderzeichen (Icon-Schriftart), gab es einige Probleme zu lösen.

Ein Problem war es, das Icon zum Drehen zu bewegen. Initial schien das mit CSS 3 - Transitions nicht möglich. Daher musste bei bestimmten Ereignissen, nachdem das Element sichtbar gemacht wurde (repaint!) noch eine CSS-Klasse hinzugefügt werden.

Ein weiteres Probleme war es, bei der Rotation den korrekten Mittelpunkt zu finden. Auf einigen wenigen Geräten eierte das Symbol sonst.