SVG und CSS sollten ♥ sein. In diesem Tutorial lernen wir, wie man eine einfache SVG-Form zeichnet und den Strich dieser Form animiert, um einen ladenden Spinner zu erstellen.

Wir werden in SCSS schreiben, um das Styling zu optimieren.

Der HTML/SVG-Code ist einfach; unser Ziel ist es, einen 40px breiten Kreis zu zeichnen. Die einzigen Attribute hier sind die x- und y-Koordinaten (Ursprungspunkt) und der Radius.

Um die Dicke des Strichs zu berücksichtigen, wenn wir ihn später hinzufügen, wird der Radius r 18 statt 20 sein.

<svg class="spinner">
<circle cx="20" cy="20" r="18"></circle>
</svg>

Styling des SVG

Wie immer wollen wir zuerst das Boxmodell definieren. Da wir mit SVG arbeiten, gehören dazu die viewBox und ihre x- und y-Koordinaten.

Die viewBox definiert die Grenzen, innerhalb derer unser Kreis gerendert wird.

$spinnerSize: 40;svg.spinner {
width: $spinnerSize + px;
height: $spinnerSize + px;
x: 0px; y: 0px;
viewBox: 0 0 $spinnerSize $spinnerSize;
}

Wir werden Strichstile und eine transparente Füllung auf den Kreis anwenden. Dadurch wird ein Umriss um den Kreispfad erstellt. Wir werden den Strich animieren, um unseren Spinner zu erstellen.

svg.spinner {
... circle {
fill: transparent;
stroke: #0ac8a6;
stroke-width: 4;
stroke-linecap: round;
}
}

Der Spinner nimmt Gestalt an, aber bevor er animiert wird, müssen wir noch ein paar Stile anwenden. Der „wachsende und sich zurückziehende“ Effekt wird durch einen breiten Strich erzeugt. Der Strich wird um den Kreispfad „geschoben“, indem der Abstand zwischen den Strichen vergrößert wird.

Um den breiten Strich zu erzeugen, verwenden wir die Eigenschaft stroke-dasharray. Die Einstellung π × Radius erzeugt einen Strich mit einer Länge, die dem Umfang des Kreises entspricht. Vorerst wird dieser Strich als einfarbiger Strich erscheinen.

svg.spinner {
... circle {
...
stroke-dasharray: (3.14 * $spinnerSize);
}
}

Zuletzt müssen wir noch die Eigenschaften Ursprung transformieren und Animation einstellen. Die Einstellung transform-origin auf die Mitte des Kreises stellt sicher, dass er sich gleichmäßig dreht. Die Animationseigenschaft wird den Animationsnamen des Spinners verwenden, den wir als Nächstes keyframen werden.

svg.spinner {
... circle {
...
transform-origin: (0.5px * $spinnerSize) (0.5px * $spinnerSize) 0;
animation: spinner 4s linear infinite;
}
}

Keyframing der Animation

Zuvor haben wir den Strich auf einen Strich gesetzt, dessen Länge dem Umfang entspricht. Jetzt können wir den Versatz dieses Strichs animieren, um ihn aus dem Kreispfad zu „schieben“.

Der Versatz kann mit der Eigenschaft „Strichversatz“ geändert werden. Durch Erhöhen des Versatzes wird der Strich zurückgezogen, während er durch Verringern wieder entlang der Kreisbahn wächst.

So, wir haben den Strich entlang der Kreisbahn animiert – das war der schwierige Teil. Aber als ladender Spinner ist der sich zurückziehende Strich nicht ganz das, was wir wollen. Wir wollen, dass es so aussieht, als ob es eine konstante Progression gibt – um die Illusion zu erzeugen, dass sich der Strich immer „vorwärts“ bewegt.

Wie können wir das erreichen? Indem wir den Kreis drehen, während sich der Strich bewegt.

@keyframes spinner {
0% {
...
transform: rotate(0deg);
} 50% {
...
transform: rotate(540deg);
} 100% {
...
transform: rotate(1080deg);
}
}

Wir kommen näher, aber der Spinner scheint langsamer zu werden. Das passiert, wenn sich der Strich entgegen der Drehrichtung bewegt. Wir können dem entgegenwirken, indem wir in der ersten Hälfte der Animation stärker rotieren.

@keyframes spinner {
0% {
...
transform: rotate(0deg);
} 50% {
...
transform: rotate(720deg);
} 100% {
...
transform: rotate(1080deg);
}
}

Im folgenden Beispiel gibt es zwei Spinner:

• Der erste hat die bestehende einheitliche Rotationsgeschwindigkeit (wirkt der Verlangsamung nicht entgegen).
• Der zweite verwendet die schnellere Rotation in der ersten Hälfte der Animation.

Ich habe einige rote Markierungen als Referenz für die Geschwindigkeit hinzugefügt, mit der sich der Spinner dreht.

Sie können sehen, dass der zweite Spinner viel flüssiger ist. Das liegt daran, dass er sich mit einer gleichmäßigeren Geschwindigkeit zu bewegen scheint. Zum Schluss wollen wir die Geschwindigkeit erhöhen, indem wir die Dauer der Animationseigenschaft verringern.

Weiterlesen

• MDN animation
• MDN stroke-dasharray
• MDN stroke-dashoffset