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.

<mark> Physische Auszeichnung

CSS - Position Sticky in einer HTML Tabelle

PHP - Callback-Funktion auf jedes Element in einem Array anwenden

JavaScript - Zeitabhängige Aktualisierung

MySQL - Spalte Gruppieren und zählen

Grafiken mit Größenangabe
Um lange Wartezeiten beim Aufbau einer HTML-Seite zu vermeiden muss man die Größe einer vorhandenen Grafik mitangeben. Durch diese Angabe kann der Browser für die Grafik den Platz reservieren und kann den Rest der Seite laden, ohne auf das Downloaden der kompletten Grafik zu warten.
<img src="bild.gif" height="Höhe des Bildes in Pixeln" width="Breite des Bildes">
Verwenden Sie niemals die Attribute WIDTH und HEIGHT, um die Größe einer Grafik in HTML zu ändern. Wenn andere Größen benötigt werden, dann erstellen Sie dafür eine kleinere beziehungsweise größere Version der Grafik.