CSS Tutorial: Wie man eine Ladeanimation erstellt: #1 Ladekreis

In meinen letzten Developer Blogpost habe ich euch gezeigt, wie man einen Fortschrittsbalken programmieren kann. Heute würde ich euch gerne zeigen, wie man eine Ladeanimation mit etwas HTML & CSS umsetzen kann.

Da es davon ziemlich viele gibt, habe ich mich einfach mal für einen Ladekreis, welcher auch hier auf Steemit in etwas abgewandelter Form verwendet wird, entschieden.

Urhebernachweis

Dieser taucht immer dann auf, wenn man von einen Tab zum nächsten wechselt, z.B. vom Reiter New auf Hot.

Lösungsfindung:

Um zu Wissen, was wir eigentlich tun müssen, hilft es immer, die gewünschte Animation zu beschreiben. Je genauer wir dies tun, umso einfacher wird es später sein, diese umzusetzen.

Die GIF lässt sich in etwa so beschreiben:

Gleichgroße Kreise tauchen im Uhrzeigersinn auf und verschwinden langsam. Dabei sind diese Kreise auch Kreisförmig angeordnet, und initial nicht sichtbar. Dabei ist immer ein Kreis voll sichtbar und die anderen, welche vor ihn sichtbar waren, werden langsam ausgeblendet.

Der Prozess des "langsamen ausblendens" sieht so aus, dass der Kreis immer mehr an Deckkraft verliert und zusätzlich kleiner wird. Auf das kleiner werden vezichte ich hier im Tutorial, um es nicht noch komplexer zu machen.

Die Lösung:

Zunächst einmal platzieren wir die benötigten Kreise an der richtigen Stelle. Dafür brauchen wir erstmal folgendes HTML und CSS:

Das Grundgerüst

<section>
  <div class="circle0 circle"></div>
  <div class="circle1 circle"></div>
  <div class="circle2 circle"></div>
  <div class="circle3 circle"></div>
  <div class="circle4 circle"></div>
  <div class="circle5 circle"></div>
  <div class="circle6 circle"></div>
  <div class="circle7 circle"></div>
  <div class="circle8 circle"></div>
  <div class="circle9 circle"></div>
</section>

Dabei dachte mir folgendes. Ein Kreis hat immer 360°, wenn ich also 10 Kreise für die Animation platzieren möchte, müssten alle 36° ein neuer Kreis platziert werden. Um das hinzukriegen, brauche ich einen immer gleichgroßen Kasten, welchen ich dann um jeweils 36° im Uhrzeigersinn verschiebe. Dort packe ich dann einfach den jeweils gleichgroßen Kreis hinein. In CSS ausgedrückt sieht dass dann folgendermaßen aus:

 section {
  position: relative;
}
section .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
section .circle:before {
  content: '';
  display: block;
  /* kreis mit steemit Hintergrundfarbe */
  width: 12px;
  height: 12px;
  background-color: #06D6A9;
  border-radius: 50%;
}
section .circle0{
  transform: rotate(36deg);
}
section .circle1 {
  transform: rotate(72deg);
}
section .circle2 {
  transform: rotate(108deg);
}
section .circle3 {
  transform: rotate(144deg);
}
section .circle4 {
  transform: rotate(180deg);
}
section .circle5 {
  transform: rotate(216deg);
}
section .circle6 {
  transform: rotate(252deg);
}
section .circle7 {
  transform: rotate(288deg);
}
section .circle8 {
  transform: rotate(324deg);
 }
section .circle9 {
  transform: rotate(360deg);
}

Wenn wir das Ergebnis betrachten, haben wir das Ziel schon fast erreicht.

Die Animation

Was nun noch fehlt, ist die Animation und ein Zeitversatz für den jeweiligen Kreis. Wir wollen ja schließlich nicht, dass alle Kreise gleichzeitig verschwinden. Viel Schreibarbeit, aber das Ergebnis kann sich sehen lassen ;)

section .circle1:before {
  animation-delay: -0.9s;
}
section .circle2:before {
  animation-delay: -0.8s;
}
section .circle3:before {
  animation-delay: -0.7s;
}
section .circle4:before {
  animation-delay: -0.6s;
}
section .circle5:before {
  animation-delay: -0.5s;
}
section .circle6:before {
  animation-delay: -0.4s;
}
section .circle7:before {
  animation-delay: -0.3s;
}
section .circle8:before {
  animation-delay: -0.2s;
}
section .circle9:before {
  animation-delay: -0.1s;
}
section .circle:before {
    animation: lebe 1s infinite linear;
}
@keyframes lebe {
   0%, 50% {opacity: 0}
   51% {opacity: 1}
   100%{opacity: 0}
}

Was zunächst komisch aussieht ist folgende Angabe

0%, 50% {opacity: 0}

Dies muss jedoch gemacht werden, da sonst von 0-51% die opacity langsam auf 1 animiert werden würde. Wir wollen aber garnicht, dass nach einer viertelsekunde die Opacity bereits 0.25 erreicht hat, sondern erst bei 51% auf 1 gesetzt wird und langsam wieder zur 0 zurückkehrt.

Das Ergebnis:

Wie immer stelle ich euch auch hier einen Fiddle link zur Lösung als Verfügung. Wer mag kann sich ja mal dran probieren die Animation so anzupassen, dass Sie möglichst nah an das GIF kommt.

---

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, wohlverdientes Wochenende!