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 {
 
border5px solid #E3E3E3; /* Farbe-Kreis */
 
border-top5px solid #FF8000; /* Farbe-Highlight */
 
border-radius50%;
 
width10px/* Breite */
 
height10px/* Höhe */
 
line-height10px/* Zeilenhöhe */
 
margin0 auto/* Ausrichtung */

 
animationloaderSpin 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% {
  
transformrotate(0deg);
 }
 
100% {
  
transformrotate(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.

<bdi> Textrichtung

CSS - Mit ::selection markierten Text hervorheben

PHP - Trennen von Buchstaben und Zahlen mit scanf()

JavaScript - HTML-Tabelle sortieren

MySQL - Datensatz mit den meisten Zeichen ermitteln

Lernen beim Arbeiten
Viele Fehler werden beim Arbeiten an der Homepage erkannt und im weiteren Verlauf vermieden (Etwas daraus gelernt!). Auch das Lernen durch Ausprobieren, zum Beispiel einen bestimmten Wert einfach erhöhen und sehen was dann passiert ist sehr lehrreich.