Ich habe ein kleines CSS3 Rotate-Y Lade-Grafik-Ding nur so zum Spaß gemacht. Hier ist ein animiertes GIF des Ruhmes, wie es in WebKit erscheint.
Theorien bei der Arbeit
- Zwei Kreise übereinander. Einer erstellt durch ein Pseudoelement.
- Der Pseudo-Kreis sitzt darunter mit negativem z-index.
- Der Pseudo-Kreis hat einen abgerundeten inneren Schatten (inset box-shadow).
- Der normale Kreis hat einen normalen Schatten (box-shadow).
- "Laden..." ist ein starkes Tag mit verstecktem Überlauf (hidden overflow).
- Die Breite des Strong-Tags ist eine animierte Keyframe, die die Anzeige unendlich oft durchführt.
- Der Text wird vertikal zentriert, indem die
line-heightgleich derheightgesetzt wird. - Der Spinner ist ein Dreieck, das über dem Pseudo-Kreis, aber unter dem normalen Kreis mit z-index platziert ist.
- Das Dreieck wird von seiner Spitze aus gedreht, indem sein
-webkit-transform-origingeändert wird. - Das Dreieck wird durch Keyframe-Animation von 0 auf 360 Grad unendlich oft animiert.
Idealerweise wäre das Dreieck ebenfalls ein Pseudoelement, aber leider ist es ein <span>. Pseudoelemente können (noch) nicht animiert werden. Firefox 4 kann sie überblenden (transition), aber Firefox 4 kann keine Keyframe-Animationen (noch).
Das ist wie üblich brillant. Alles, was wir jetzt noch brauchen, ist, dass alle anderen Browser aufholen und fair mitspielen.
Mach weiter so, Chris.
Diese Techniken sind genau das, was ich für mein Phonegap-Projekt brauchte! Danke für die erneute Erklärung.
Kev
Wie üblich, großartige Arbeit. Es sieht für mich allerdings nicht so gut aus...
Google Chrome 9.0.597.84 – Windows XP: http://nahueljose.com.ar/css3-loading.jpg
Und für mich mit Chrome 9 unter Windows 7 auch...
Dasselbe. Chrome 9 Windows 7, da stimmt etwas nicht.
Funktioniert gut in Safari für Win (XP). Sieht nach einem Chrome-Problem aus, das behoben wurde (siehe Kommentar weiter unten).
Seltsam, es sieht auf dem Mac Google Chrome großartig aus
http://codecrunchers.net/chrome-mac.png
Das ist ein bekannter Fehler,
http://code.google.com/p/chromium/issues/detail?id=25334
http://stackoverflow.com/questions/3358560/google-chrome-inset-box-shadow-bug-on-windows-not-on-mac-better-workaround
es ist behoben http://paulirish.com/2011/chrome-inset-box-shadow-bug-fixed/
Sehr schicke CSS-Bearbeitung, mein Herr! Auf geht's, Browser, implementiert diese Übergänge und Transformationen.
Schickes Zeug!
…aber noch schicker ist dein Talent, Dinge auf einem Niveau zu erklären, das JEDER Webdesigner verstehen kann.
Danke!
nett, du gibst mir Inspiration, den Flicker Ladekreis in CSS nachzubauen :D
http://jsfiddle.net/feroc1ty/fTzqJ/
Gute Arbeit mit dem Flicker-Spinner. Das gibt mir Ideen für Logos und anderes.
Gute Nutzung der verfügbaren CSS3-Features.
Wirklich saubere Erklärung.
Glückwunsch.
Ich kann es kaum erwarten, bis Firefox Frame-Animationen implementiert.
Sehr cool
Aber ich werde das Gefühl nicht los, dass Frame-Animationen dazu bestimmt sind, das neue <blink>. . . </blink> und <marquee>. . .</marquee> zu werden.
Funktioniert nicht mit Chrome 9.0.597.94 unter Windows XP.
cool!!
WOW.. wirklich schön.. Aber wie kann ich es benutzen??
Oder man könnte einfach ein flüssiges Flash-animiertes Element verwenden, das in 2 Minuten erstellt werden kann und etwa 1,5 KB Dateigröße hat. Es würde in *jedem* Browser funktionieren!
Hey, wenn du das gerne machst und es für dich gute Arbeit leistet, dann hoch die Tassen, mein Freund. Mir geht es um solide, produktionsreife Sachen. Aber mir geht es auch darum, Neues zu lernen und das Web voranzubringen. Das machen wir schon seit einer Weile und es funktioniert fantastisch.
Keine Sorge, es wird Tools für die Erstellung von CSS3-Animationen geben, wenn alle wichtigen Browser sie unterstützen (wir sind fast da).
Zum Beispiel gibt es jetzt Tools für die Erstellung von CSS3-Verläufen.
http://www.colorzilla.com/gradient-editor/
@Adam: Wenn unsere Gesellschaft nicht „hungrig“ nach technologischen Verbesserungen wäre, würden wir immer noch auf Papier schreiben, anstatt auf einer Tastatur zu tippen.
Daher ist es sehr nützlich, die Technologie ständig weiterzuentwickeln und CSS3 immer weiter in die Realität zu drängen, bis es zur Norm wird, wenn dann CSS4 herauskommt.
Nicht um die Stimmung zu verderben, aber wie würde ich das mit etwas verbinden, das tatsächlich geladen wird? Sag ich nur so.
Zum Beispiel das Ajax Ladekreis-Symbol? =)
Ich habe wirklich nach dieser Art von Preloader gesucht. Danke Chris.
Großartige Arbeit! Freue mich auf viele dieser Art von Animationen im Web.
Wow! Chris, ich hätte nie gedacht, dass man CSS3 so verwenden könnte. Gute Arbeit, Mann.
Es funktioniert nur auf weißem Hintergrund. Keine gute Lösung.
Oh! Ich liebe das Ergebnis! Danke fürs Teilen :)