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

1. offizieller Beitrag

    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

    • Offizieller Beitrag

    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.

    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?

    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

    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.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    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 :)