Wieso funktioniert dieser CSS-Ladebalken nicht?
Folgendes Problem: Ich hab hier eine Seite, die normalerweise einen Ladebalken generieren sollte. In der Style.css ist es wie folgt definiert:
.loader {
position: relative;
}
.loader::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
border-top: 5px solid red;
border-left: 3px solid brown;
border-bottom: 1px solid purple;
border-right: transparent;
animation: spinner 0.8s linear infinite;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
In der Page selbst hab ich dann: <div class="loader">Ladebalken</div>
Die Loaderclass oben ist nur ein Beispiel. Ich hab es auch schon mit anderen Einstellungen probiert.
Nach allem was ich so finde und bisher verstanden habe müsste auf der Webseite eigentlich an der entsprechenden Position ein animierter Ladebalken angezeigt werden, wird es aber nicht, sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund. Die Style.css ist korrekt verlinkt, alle anderen Elemente wie z.b Buttons werden korrekt angezeigt.
Wo liegt das Problem bzw. woran könnte das liegen?
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">