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.

<s> Physische Auszeichnung

CSS - Transparenter Farbverlauf

PHP - Download-Zeit ermitteln

JavaScript - Zeit-Differenz ermitteln

MySQL - Datum vom Timestamp anzeigen

Werbung in Signaturen
Sie sind in Communities, Foren und sonstigen Gemeinschaften aktiv? Da gibt es oft eine Möglichkeit, eine Signatur zu erstellen, wo man etwas hinschreibt, was unter jedem Beitrag zu sehen ist, wie eine Briefsignatur. Darin können sie wunderbar Werbung für Ihre Homepage machen. Oder in Ihren Emails die Sie versenden.