CSS - Ladeanimation ohne Bild-Grafik
Eine Ladeanimation ohne Bild-Grafik. Die Farbe, Größe, Geschwindigkeit und die Laufrichtung sind anpassbar.
CSS-Anweisung für das erste Beispiel
<style>
div#loader {
border: 5px solid #E3E3E3; /* Farbe-Kreis */
border-top: 5px solid #FF8000; /* Farbe-Highlight */
border-radius: 50%;
width: 10px; /* Breite */
height: 10px; /* Höhe */
line-height: 10px; /* Zeilenhöhe */
margin: 0 auto; /* Ausrichtung */
animation: loaderSpin 0.4s linear infinite;
/*
loaderSpin = Name der Animation
0.4s = Geschwindigkeit in Sekunden
linear = Geschwindigkeitskurve
infinite = Fortlaufend wiederholen
reverse = Rückwärts
alternate-reverse = Alternierend-Rückwärts
*/
}
@keyframes loaderSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="loader"></div>
➤ Alle CSS-Anweisungen der dargestellten Beispiele stehen im Seitenquelltext.
Siehe: CSS Animation (Generator) und Farbverlauf mit CSS
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<mark> Physische Auszeichnung
CSS - Position Sticky in einer HTML Tabelle
PHP - Callback-Funktion auf jedes Element in einem Array anwenden