Wieso funktioniert dieser CSS-Ladebalken nicht?

1 Antwort

Möglicherweise befindet sich der Spinner außerhalb des sichtbaren Bereichs, weil er in irgendeiner Form überdeckt/abgeschnitten wird.

Ich würde erst einmal die Höhe und Breite des Pseudoelements anpassen (z.B. auf jeweils 20px), sodass man wieder erkennt, dass sich es sich um einen Kreis handeln soll. Dann wäre das Element auch so groß, sodass es über dem Text liegt. Wenn du einen roten Hintergrund verwendest, ändere auch die Rahmenfarben des Spinners.

Wenn das Element daraufhin noch nicht sichtbar ist, dann schau dir die Elemente im Webinspektor (in den Entwicklungstools deines Browsers) an. Zum einen sollte dem div-Element immer noch die loader-Klasse zugeordnet sein (andernfalls gibt es entweder ein Skript, welches dynamisch Einfluss auf das Element nimmt oder das initiale Markup, welches geladen wird, passt doch nicht). Zum anderen kannst du via Mouseover über dem Knoten des Pseudoelements sehen, wo es auf der Seite liegt (die entsprechende Fläche wird farblich im Browserfenster hervorgehoben).

(...) sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund.

Das Wort ist initial gesetzt. Via CSS kannst du es nicht wirklich entfernen (nur durch Ausblenden des kompletten Elements, was den Spinner inkludieren würde).

Solltest du bei deinen Versuchen gemerkt haben, dass sich das CSS, welches von der Seite geladen wird, nicht ändert, obwohl du die Datei modifiziert hast, dann wird die CSS-Datei wohl in einem Cache gehalten. Hänge nach jeder Änderung der Datei einen anderen Querystring an die Ressourcen-URL.

Beispiel:

<link href="style.css?v=123" rel="stylesheet">