Ich heiße dich herzlich willkommen zum drittenTeil 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, habe ich dir gezeigt, wie man einen "Snakeloader" erstellen kann.

Heute würde ich dir gerne zeigen, wie man mit ein paar Anpassungen des "Snakeloaders" ein Schlangenrennen veranlassen kann, welches als Ladebildschirm ganz schön was her macht.

Damit sich jeder ein Bild von der Animation machen kann, welche wir erstellen werden hier ein PNG zur Veranschaulichung:

Vorgehensweise

Zunächst werde ich die zuvor verwendete Strecke "track" entfernen & dazu verwenden, einen Schriftzug zu platzieren. In diesem Falle mit dem Wort "Loading".

Die Schlage wird auf ein drittel ihrer Länge gekürzt & Sie bekommt 2 kleine Geschwister. Dann werden diese unterschiedlich schnell animiert. Fertig!

Das HTML

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

<div id="snake"></div>
<div id="font">Loading</div>

Die anderen zwei Schlangen werden wir mit dem Pseudoelementen :before & :after platzieren.

Das CSS

Zunächst wollen wir unsere Pseudoelemente platzieren. Dann machen wir aus beiden Kreise & verpassen Ihnen unterschiedliche Farben & Animationslaufzeiten. Zudem platzieren wir Sie mit absoluter Positionierung näher zum Center.

#snake:before, 
#snake:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 4px solid transparent;
  animation: rotate infinite 2s linear;
}
#snake:before {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-top-color: #1de9b6;
}
#snake:after {
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border-width: 3px;
  border-top-color: #004d40;
  animation-duration:1s;
}

---

Empfehlung für die Farbwahl:

Falls jemand eine Inspiration für zu verwendende Farben sucht, welche sich nicht zusehr voneinander Unterscheiden, kann ich nur Material Design Colors empfehlen. Dort findet man fertige Farbpaletten, mit einer Aufschlüsselung der Farbe von dunkel nach Hell. Ich habe mich für Farben der Farbpalette "Teal" entschieden.

---

Nun setzen wir den Schriftzug noch in die Mitte:

#font {
  position:absolute;
  top:75px;
  left:50px;
  color:#fff;
  width: 150px;
  height: 150px;
  line-height:100px;
  text-align:center;
}

und können im Anschluss unser Werk betrachten:

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 ein schönes Wochenende!