Ich heiße dich herzlich willkommen zum zweiten Teil meines CSS Tutorials, in welchen ich dir zeigen werde, wie man mit etwas HTML & CSS eine Ladeanimationen auf die Beine stellen kann.

Im letzten Teil, welcher sage und schreibe 5 Monate her ist, habe ich dir gezeigt, wie man einen "Ladekreis" erstellen kann.

Heute würde ich dir gerne zeigen, wie man den berühmten "Snakeloader" realisieren kann.

Damit sich auch jeder ein Bild von dieser Animation machen kann, hier ein GIF zur veranschaulichung:

Lösungsansatz

Um die dargestellte Animation nachbauen zu können, habe ich mir folgendes überlegt. Man nehme zwei gleichgroße Kästen und platziere diese übereinander. Dann macht man Kreise daraus. Dann verpasst man diesen einen gleichgroßen Border. Nun animiert man einen der Kreise, sich um die eigene Achse zu drehen. Fertig!

Aber wie sieht dass in der Praxis aus? Garnicht so wild, ist ja auch nicht schwer ;)

Das HTML

Zum HTML gibt es nicht alzuviel zu sagen. Wir benötigen 2 Elemente, welche wir nach unseren belieben stylen können.

<div id="track"></div>
<div id="snake"></div>

Da wir den "Snackeloader" nachbauen wollen, habe ich bei einen der Elemente die Id für die Strecke, also"track" und dass andere Element, welches die Schlage darstellen soll, für die Id "snake" entschieden.

Das CSS

Was im CSS notwendig ist, haben wir ja bereits weiter oben beschrieben.

Man nehme zwei gleichgroße Kästen und platziere diese übereinander. Dann macht man Kreise daraus.

#track, #snake {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position:absolute;
  top:0;
  left:0;
}

Gleichgroße Kästen erreichen wir durch das referenzieren der id track und snake. Diese sollen beide 100px breit und hoch sein. Das übereinander platzieren erreichen wir durch die absolute Positionierung der Elemente. Zu Kreise werden unsere Elemente dank der border-radius Anweisung.

Dann verpasst man diesen einen gleichgroßen Border. Nun animiert man einen der Kreise, sich um die eigene Achse zu drehen. Fertig!

Ok wir ergänzen unsere Angabe von track und snake zunächst um den border.

#track, #snake {
  border: 10px solid #e3e3e3;
}

Nun erwecken wir unsere Schlange zum leben!

#snake {
  animation: rotate infinite 1s linear;
}

@keyframes rotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Die CSS-Angaben innerhalb der @keyframes-Regel weisen den Browser dazu an, schrittweise vom aktuellen Wert zum Zielwert zu wechseln. Die dauer der Animation und die Information, ob diese sich wiederholen soll, pflegen wir am zu animierenden Element selbst. In diesem Falle wollen wir, dass die Animation eine Sekunde dauert & sich endlos wiederholt. Zudem soll sie linear verlaufen. Schauen wir uns mal an, was nun im Browser angezeigt wird:

Irgendwie haben wir nicht das gewollte Ergebnis. Wir haben zwar unsere 2 Kreise, diese liegen auch scheinbar übereinander. Ein Blick in den Inspektor verrät uns was zu tun ist: Wir müssen unsere Strecke noch anders einfärben. Zudem muss sich die Schlange über der Strecke befinden.

#track {
  border-color: rgb(100,100,100);
}

#snake {
  animation: rotate infinite 1s linear;
  border-right-color: transparent;
  z-index: 10;
}

Die z-index Angabe weist den Browser an, die Schlange "näher" zum Betrachter zu platzieren. Zudem wollen wir, dass die Schlange nur 3/4 des Verfügbaren Platzes einnimmt. Dafür weisen wir den Browser dazu an, die Randfarbe Rechts Transparent zu zeichnen. Das Ergebnis kann sich sehen lassen:

Für die Nerds unter euch hier auch nochmal ein Fiddlelink.

---

Vielen Dank fürs lesen, falls Ihr irgendwelche Fragen haben solltet, lasst es mich in den Kommentaren wissen :)

Wünsche euch allen eine schöne restliche Woche!