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 Bausteinen (Codeschnipsel) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<aside> Nebeninhalt

CSS - Leuchtende blaue Eingabefelder

PHP - Mit Metaphone Wörter vergleichen

JavaScript - Audiodateien per Button-Klick abspielen

MySQL - Benutzer ausgeben die min. 25 Tage registriert sind