CSS: Loader-Logo mit Farbe füllen gemäß Ladefortschritt

RainySunday

Hallo zusammen,

beim Laden meiner Website wird aktuell ein Logo angezeigt. Das Logo ist schwarz. Ich hätte gerne, dass sich das Logo beim Aufruf der Seite grau ist und sich dann langsam mit schwarz füllt gemäß des Ladefortschritts der Hauptseite, die im Hintergrund lädt.
Ich habe sowas ähnliches hier http://preview.themeforest.net/item/jack-rose…9450.1534264283 gesehen - auf "Single Image" klicken (Hoffe ich darf Links posten?).
Weiß jemand, ob so etwas mit CSS machbar ist und wenn ja wie das gehen könnte?
Ich habe bereits versucht über GIMP ein .gif zu erstellen, dass sich langsam füllt. Das funktioniert auch hat aber zwei entscheidende Nachteile:

1.) Die Füllgeschwindigkeit ist fix vorgegeben - d.h. unter Umständen ist das GIF fertig animiert obwohl die Hauptseite noch nicht vollständig geladen ist
2.) Verliert das Logo leider sichtbar an Schärfe durch das Umwandeln in ein GIF

Daher bin ich für Tipps sehr dankbar

Viele Grüße
RainySunday

Arne Drews

Ich will mich nicht zu weit aus dem Fenster lehnen, aber ich denke, dass dazu JS notwendig ist.
Bei CSS hast Du keinen Einfluß auf Ladefortschritte. CSS ist auch in der 3er Linie immer noch nicht in der Lage, ausgiebig Interaktionen verarbeiten zu können.
Bis auf ein paar Variablen setzen und verwenden war es das auch schon.

Eine Idee wäre, zwei PNGs übereinander zu legen und je nach Lade-Fortschritt dann den oberen Container in der Breite anpassen.
Das aber nur als Idee, ohne mich damit intensiver befassen zu wollen.

RainySunday

Vielen Dank für deine Rückmeldung. Das habe ich mir fast gedacht... Mit JS habe ich leider noch nie gearbeitet
Gibt es da ein Stichwort für den Effekt mit dem sich sowas umsetzen lässt?

Wie kann ich denn bei CSS generell auf den Ladefortschritt zurück greifen?

basti1012

Man könnte ja auch mit css @keyframes ein Animierten Ladebalken erstellen. Habe das mal auch in der art Versucht. Habe die Zeit gemessen wie lange der Seitenaufbau bei mir dauert. So lange lief der @keyframe auch. Ist zwar keine genau angabe aber da fast jeder dsl hat sieht es bei den meisten Leuten schon perfekt aus. Fals die Seite schneller geladen ist als der @keyframe habe ich ihn mit onload abgebrochen. Aber da sind wir wieder was Arne Drews sagt ,das es ohne Javascript nicht 100% funktionieren tut

Gastl

Zitat von basti1012

Ist zwar keine genau angabe aber da fast jeder dsl hat sieht es bei den meisten Leuten schon perfekt aus.

DSL sagt aber nichts über die Geschwindigkeit aus. Und es gibt Millionen, die kein DSL haben.

Das ganze wird nur mit JavaScript funktionieren.

Arne Drews

CSS bietet aktuell keine brauchbaren Events, Punkt.
Um das innvoll umzusetzen ist bspw. JS erforderlich, alles andere ist lediglich Hick-Hack-Programmierung...

RainySunday

Ich werde mein Glück mit JS probieren. Habe gesehen, dass es ein github projekt pace.js gibt, dass genau in die Richtung geht, die ich brauche. Damit werde ich mein Glück versuchen.
Danke für eure Hilfe

Tags