So erstellen Sie einen Reddit-inspirierten Ladespinner nur mit HTML und CSS

Die mobile App von Reddit verfügt über einen ziemlich auffälligen Ladespinner, der an Orbitalkörper erinnert, die einen Planeten oder Stern umkreisen. Die meisten Entwickler würden für eine solche Aufgabe nach JavaScript oder SVGs greifen, aber dankanimation-iteration-count: infinite;und ein paar andere Hacks und Tricks, das ist nicht einmal nötig. Heute werde ich Ihnen zeigen, wie man einen von Reddit inspirierten Spinner nur in HTML und CSS codiert!

Hier ist das Endergebnis:

Grundeinstellung

Beginnen wir mit dem Schreiben einiger HTML-DOM-Elemente, auf die wir den Mittelkreis und jedes der rotierenden Orbitale stecken können.

 ... ... 

Die inner-spinund outer-spin-Elemente sind die übergeordneten Knoten von allem, was animiert werden muss, und schließlich werden wir die CSS-Keyframes-Transformationen auf diese übergeordneten Knoten anwenden.

Im obigen Codebeispiel stehen die Ellipsen ( ) für die Bögen und umlaufenden „Monde“. Sowohl der innere als auch der äußere Ring enthalten jeweils zwei Bögen und zwei Monde, aber aus Gründen, die etwas später klar werden, besteht jeder Bogen tatsächlich aus zwei CSS-Formen, sodass wir insgesamt acht Bögen und vier Monde benötigen. Der vollständige HTML-Code sieht folgendermaßen aus:

CSS-Formen

Es ist möglich, Kreise und Bögen in CSS zu zeichnen, indem Sie einfach ein Quadrat erstellen und border-radiusauf 50% setzen.

Jede Seite des Rahmens kann eine andere Farbe annehmen oder auf eingestellt werden transparent. Die background-colorEigenschaft legt die Füllung der Form fest, falls vorhanden.

Es ist einfach, 90-, 180- und 270-Grad-Bögen zu zeichnen, indem Sie einfach eine oder mehrere Seiten des Rahmens so einstellen, dass sie transparent sind. Wenn Sie sich jedoch den Spinner oben auf der Seite genau ansehen, werden Sie feststellen, dass der „Schwanz“ jedes Orbitals eine Lücke zwischen sich und dem Mond hinter sich lässt. Das heißt, obwohl die Bogenlängen nahe bei 180 Grad liegen, sind sie etwas kleiner als 180.

Das Zeichnen von Kreissegmenten mit unregelmäßigen Längen in CSS erfordert einen kleinen Hack. Dazu müssen wir zwei benachbarte 90-Grad-Bogensegmente zeichnen und eines leicht drehen, so dass sie sich überlappen, so dass ein scheinbares Bogensegment von etwa 160 Grad verbleibt.

Wenn Sie jetzt noch einmal auf HTML zurückblicken, können Sie möglicherweise erraten, warum wir für jeden Bogen (ein arc_startund arc_end) zwei Knoten festgelegt haben . Diese werden verwendet, um jeden Teil eines einzelnen überlappenden Bogens darzustellen, der den Schwanz jedes Orbitals darstellt.

CSS einrichten

Zunächst legen wir eine CSS-Variable fest, die die Farbe des Drehfelds darstellt, und eine weitere Variable, um eine Übersetzung von -50%, -50% darzustellen, die wir im gesamten CSS verwenden, um Formen um ihre Mitte zu zentrieren (wie angenommen) ihre obere linke Ecke (dies ist die Standardeinstellung).

html { --spinner: #1EAAF0; --center: translate(-50%, -50%); }

Jetzt können wir auch den zentralen Kreis zeichnen.

.center { position: absolute; width: 30px; height: 30px; background: var(--spinner); border-radius: 50%; top: 50%; left: 50%; transform: var(--center); }

Die untergeordneten Knoten für jedes Orbital sind in übergeordneten Knoten mit den Bezeichnungen inner-spinund eingeschlossen outer-spin. Im Moment verwenden wir sie nur, um den Spinner im Fenster zu zentrieren.

.outer-spin, .inner-spin { position: absolute; top: 50%; left: 50%; }

Zeichnen der Orbitale

Der Ladespinner besteht im Grunde aus einer Reihe konzentrischer Kreise. Konzentrieren wir uns also zunächst darauf, nur einen Bogen zu zeichnen.

Da jeder Bogen aus zwei überlappenden Abschnitten besteht, zeichnen wir zunächst zwei Bögen nebeneinander.

.inner-arc { width: 62px; height: 62px; } .inner-arc_start-a { border-color: transparent transparent transparent green; /* NOTE: the order here very much matters! */ transform: var(--center) rotate(0deg); } .inner-arc_end-a { border-color: red transparent transparent transparent; transform: var(--center) rotate(0deg); }

Die erste Transformation zentriert das im Fenster. Die Drehung wird auf null Grad eingestellt, um den Standardzustand der Bögen anzuzeigen.

Beachten Sie, dass die Bögen nicht mit den x-Kreuzungen auf dem Einheitskreis übereinstimmen. Um dies zu korrigieren und die Arbeit mit den Bögen zu vereinfachen, drehen wir die Bögen um 45 Grad. Dann drehen wir einen der Bögen leicht über, um eine Gesamtbogenlänge von etwa 160 Grad zu erzeugen.

.inner-arc_start-a { border-color: transparent transparent transparent green; transform: var(--center) rotate(65deg); } .inner-arc_end-a { border-color: red transparent transparent transparent; transform: var(--center) rotate(45deg); }

Als nächstes können wir einen der Orbitalmonde positionieren, indem wir ihn entlang der x-Achse bewegen. Im Gegensatz zu Vektorgrafiken wie SVGs sind CSS-Ränder leider keine breiten Vektoren, die einen Strichstil akzeptieren. Das bedeutet, dass Abstände zum Mittelpunkt der Linie nicht automatisch gemessen werden. Bei der Positionierung von Objekten müssen wir die Breite des Rahmens berücksichtigen.

Dies führt zu einigen „magischen Zahlen“, die wir wahrscheinlich minimieren könnten, wenn wir mehr CSS-Variablen festlegen und die calc()Funktion verwenden möchten. Das scheint allerdings etwas kompliziert zu sein, daher positioniere ich den Kreis vorerst nur nach Pixelwerten.

.inner-moon-a { position: absolute; top:50%; left:50%; width: 12px; height: 12px; background: red; border-radius: 50%; transform: var(--center) translate(33px, 0); }

Als nächstes zeichnen wir zwei weitere Bögen, aber diesmal verwenden wir die scale(-1, -1)Transformation. Dadurch werden die Bögen sowohl über die x- als auch über die y-Achse gespiegelt, was im Wesentlichen den Kondensstreifen widerspiegelt.

.inner-arc_start-b { border-color: transparent transparent transparent var(--spinner); transform: var(--center) rotate(65deg) scale(-1, -1); } .inner-arc_end-b { border-color: var(--spinner) transparent transparent transparent; transform: var(--center) rotate(45deg) scale(-1, -1);

Schließlich wiederholen wir für die äußere Umlaufbahn einfach das CSS aus der inneren Umlaufbahn, stellen jedoch eine größere Höhe und Breite ein! (Stellen Sie sich vor, wie kurz dieses CSS mit SASS-Mixins sein könnte!)

.outer-arc { width: 100px; height: 100px; }

Hinzufügen der Animation

Der letzte Schritt ist das Hinzufügen einer Animation. Zuerst müssen wir ein einzelnes Keyframes-Element hinzufügen, das den Typ des Animationsverhaltens und die von der Animation betroffenen CSS-Elemente festlegt, in diesem Fall die Drehung durch eine transformEigenschaft.

@keyframes spin { 100% {transform: rotate(360deg); } }

Der Bezeichner " spin" verbindet die Keyframes wieder mit Animationsattributen, die wir in jedem übergeordneten Element hinzufügen . Die Animationseigenschaft legt die zeitlichen Informationen für die Animation fest, was bedeutet, dass jedes Orbital mit einer anderen Geschwindigkeit umkreist.

.outer-spin { animation: spin 4s linear infinite; } .inner-spin { animation: spin 3s linear infinite; }

Das ist es!

The code for this tutorial can be found on CodePen.io. Please comment — or Tweet at me @PleathrStarfish — if you have a suggestion, observation, or a cool fork of my code!