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?