Einzelelementlader: Der Spinner

Das Erstellen von Nur-CSS-Loadern ist eine meiner Lieblingsaufgaben. Es ist immer befriedigend, sich diese unendlichen Animationen anzusehen. Und natürlich gibt es sie viel von Techniken und Herangehensweisen, um sie herzustellen – keine Notwendigkeit schauen Sie weiter als CodePen um zu sehen, wie viele. In diesem Artikel werden wir jedoch sehen, wie man einen einzelnen Elementlader dazu bringt, so wenig Code wie möglich zu schreiben.

Ich habe eine Sammlung von mehr als 500 Single-Div-Loadern erstellt und in dieser vierteiligen Serie werde ich die Tricks teilen, mit denen ich viele von ihnen erstellt habe. Wir werden eine große Anzahl von Beispielen behandeln und zeigen, wie kleine Anpassungen zu lustigen Variationen führen können und wie wenig Code wir schreiben müssen, um alles zu verwirklichen!

Für diesen ersten Artikel werden wir eines der gebräuchlicheren Loader-Muster erstellen: Spinning Bars:

Hier ist der Ansatz

Eine triviale Implementierung für diesen Loader besteht darin, ein Element für jeden Balken zu erstellen, der in ein übergeordnetes Element gewickelt ist (für insgesamt neun Elemente), und dann damit zu spielen opacity und transform um den Dreheffekt zu erzielen.

Meine Implementierung erfordert jedoch nur ein Element:

<div class="loader"></div>

…und 10 CSS-Deklarationen:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Lassen Sie uns das aufschlüsseln

Auf den ersten Blick mag der Code seltsam aussehen, aber Sie werden sehen, dass er einfacher ist, als Sie vielleicht denken. Der erste Schritt besteht darin, die Dimension des Elements zu definieren. In unserem Fall ist es ein 150px Quadrat. Wir können setzen aspect-ratio zu verwenden, damit das Element quadratisch bleibt, egal was passiert.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Beim Erstellen von CSS-Loadern versuche ich immer, einen Wert zum Steuern der Gesamtgröße zu haben. In diesem Fall ist es die width und alle Berechnungen, die wir behandeln, beziehen sich auf diesen Wert. Dadurch kann ich einen einzelnen Wert ändern, um den Loader zu steuern. Es ist immer wichtig, die Größe unserer Lader einfach anpassen zu können, ohne dass viele zusätzliche Werte angepasst werden müssen.

Als Nächstes verwenden wir Farbverläufe, um die Balken zu erstellen. Dies ist der schwierigste Teil! Lassen Sie uns verwenden dank One Farbverlauf zu erstellen XNUMX Balken wie die folgenden:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Unser Farbverlauf wird mit einer Farbe und zwei Farbstopps definiert. Das Ergebnis ist eine durchgehende Farbe ohne Verblassen oder Übergänge. Die Größe ist gleich 34% breit und 8% hoch. Es ist auch in der Mitte platziert (50%). Der Trick ist die Verwendung des Schlüsselwortwerts space – Dies dupliziert den Farbverlauf und gibt uns insgesamt zwei Balken.

Aus die spezifikation:

Das Bild wird so oft wiederholt, wie es in den Hintergrundpositionierungsbereich passt, ohne beschnitten zu werden, und dann werden die Bilder beabstandet, um den Bereich auszufüllen. Das erste und das letzte Bild berühren die Ränder des Bereichs.

Ich verwende eine Breite gleich 34% was bedeutet, dass wir nicht mehr als zwei Balken haben können (3*34% größer ist als 100%), aber mit zwei Balken haben wir Leerzeichen (100% - 2 * 34% = 32%). Dieser Raum befindet sich in der Mitte zwischen den beiden Balken. Mit anderen Worten, wir verwenden eine Breite für den Verlauf, die dazwischen liegt 33% und 50% um sicherzustellen, dass wir mindestens zwei Balken mit etwas Abstand zwischen ihnen haben. Der Wert space ist, was sie für uns richtig platziert.

Wir machen dasselbe und erstellen einen zweiten ähnlichen Farbverlauf, um zwei weitere Balken oben und unten zu erhalten, die uns eine geben background Immobilienwert von:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Wir können das mit einer CSS-Variablen optimieren, um Wiederholungen zu vermeiden:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Jetzt haben wir also vier Balken und können dank CSS-Variablen den Farbwert einmal schreiben, was eine spätere Aktualisierung erleichtert (wie wir es bei der Größe des Loaders getan haben).

Um die verbleibenden Balken zu erstellen, tippen wir auf die .loader Element und seine ::before Pseudo-Element, um vier weitere Balken für insgesamt acht zu erhalten.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Beachten Sie die Verwendung von display: grid. Dadurch können wir uns auf die Vorgabe des Grids verlassen stretch Ausrichtung, damit das Pseudoelement den gesamten Bereich seines Elternteils abdeckt; Daher ist es nicht erforderlich, eine Dimension darauf anzugeben – ein weiterer Trick, der den Code reduziert und verhindert, dass wir uns mit vielen Werten befassen!

Jetzt drehen wir das Pseudo-Element um 45deg um die restlichen Stäbe zu positionieren. Bewegen Sie den Mauszeiger über die folgende Demo, um den Trick zu sehen:

Deckkraft einstellen

Was wir versuchen, ist den Eindruck zu erwecken, dass es einen Balken gibt, der eine Spur aus verblassenden Balken hinterlässt, während er sich auf einem kreisförmigen Weg bewegt. Was wir jetzt brauchen, ist, mit der Transparenz unserer Balken zu spielen, um diese Spur zu erstellen, was wir mit CSS machen werden mask kombiniert mit einem konischen Gradienten wie folgt:

mask: conic-gradient(from 22deg,#0003,#000);

Um den Trick besser zu sehen, wenden wir dies auf eine vollfarbige Box an:

Die Transparenz der roten Farbe nimmt im Uhrzeigersinn allmählich zu. Wir wenden dies auf unseren Lader an und haben die Balken mit unterschiedlicher Deckkraft:

In Wirklichkeit scheint jeder Balken zu verblassen, da er durch einen Farbverlauf maskiert ist und zwischen zwei halbtransparenten Farben liegt. Es ist kaum wahrnehmbar, wenn dies ausgeführt wird. Es ist also so, als könnte man sagen, dass alle Balken dieselbe Farbe mit unterschiedlicher Deckkraft haben.

Die Drehung

Wenden wir eine Rotationsanimation an, um unseren Loader zu erhalten. Beachten Sie, dass wir eine schrittweise Animation benötigen und keine kontinuierliche, deshalb verwende ich sie steps(8). 8 ist nichts anderes als die Anzahl der Balken, sodass dieser Wert geändert werden kann, je nachdem, wie viele Balken verwendet werden.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Das ist es! Wir haben unseren Loader mit nur einem Element und ein paar CSS-Zeilen. Wir können seine Größe und Farbe einfach steuern, indem wir einen Wert anpassen.

Da wir nur die genutzt haben ::before Pseudo-Element können wir vier weitere Balken hinzufügen, indem wir verwenden ::after um mit insgesamt 12 Takten und fast demselben Code zu enden:

Wir aktualisieren die Rotation unserer Pseudoelemente, um sie zu berücksichtigen 30deg und 60deg statt 45deg bei Verwendung einer Zwölf-Schritt-Animation statt acht. Ich habe auch die Höhe auf verringert 5% statt 8% um die Stangen etwas dünner zu machen.

Beachten Sie auch, dass wir haben grid-area: 1/1 auf den Pseudoelementen. Dadurch können wir sie im gleichen Bereich übereinander stapeln.

Erraten Sie, was? Wir können mit einer anderen Implementierung nach demselben Loader greifen:

Können Sie die Logik hinter dem Code herausfinden? Hier ist ein Hinweis: Die Deckkraft wird nicht mehr mit einem CSS behandelt mask aber innerhalb des Farbverlaufs und verwendet auch die opacity Eigentum.

Warum nicht stattdessen Punkte?

Das können wir voll und ganz:

Wenn Sie den Code überprüfen, werden Sie sehen, dass wir jetzt mit einem radialen Farbverlauf anstelle eines linearen arbeiten. Ansonsten ist das Konzept genau das gleiche, wo die Maske den Eindruck von Deckkraft erzeugt, aber wir haben die Formen als Kreise anstelle von Linien gemacht.

Unten sehen Sie eine Abbildung zur Veranschaulichung der neuen Verlaufskonfiguration:

Wenn Sie Safari verwenden, beachten Sie, dass die Demo fehlerhaft sein kann. Das liegt daran, dass Safari derzeit keine Unterstützung für die at Syntax in radialen Farbverläufen. Aber wir können den Farbverlauf etwas umkonfigurieren, um das zu überwinden:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Weitere Loader-Beispiele

Hier ist eine weitere Idee für einen Spinnerlader ähnlich dem vorherigen.

Für diesen verlasse ich mich nur auf background und mask um die Form zu erstellen (keine Pseudoelemente erforderlich). Ich definiere die Konfiguration auch mit CSS-Variablen, um viele Variationen aus demselben Code erstellen zu können – ein weiteres Beispiel für die Leistungsfähigkeit von CSS-Variablen. Ich habe einen anderen Artikel über diese Technik geschrieben wenn sie mehr details wollen.

Beachten Sie, dass einige Browser immer noch auf a angewiesen sind -webkit- Präfix für mask-composite mit einem eigenen Satz von Werten und zeigt den Spinner in der Demo nicht an. Hier ist eine Möglichkeit, dies zu tun ohne mast-composite für mehr Browserunterstützung.

Ich habe noch einen für dich:

Für diesen verwende ich a background-color um die Farbe zu steuern und zu verwenden mask und mask-composite Um die endgültige Form zu erstellen:

Bevor wir enden, hier sind noch ein paar Spinning Loader, die ich vor einiger Zeit gemacht habe. Ich verlasse mich auf verschiedene Techniken, verwende aber immer noch Farbverläufe, Masken, Pseudoelemente usw. Es könnte eine gute Übung sein, die Logik jedes einzelnen herauszufinden und gleichzeitig neue Tricks zu lernen. Wenn Sie jedoch Fragen dazu haben, finden Sie den Kommentarbereich unten.

Wrapping up

Sehen Sie, es gibt so viel, was wir in CSS mit nichts als einem einzigen div, ein paar Farbverläufen, Pseudoelementen und Variablen tun können. Es sieht so aus, als hätten wir eine ganze Reihe verschiedener Spinning Loader erstellt, aber sie sind im Grunde alle dasselbe mit geringfügigen Modifikationen.

Dies ist nur der Anfang. In dieser Serie werden wir uns mit weiteren Ideen und fortgeschrittenen Konzepten zum Erstellen von CSS-Loadern befassen.

---

Einzelelementlader: Der Spinner ursprünglich veröffentlicht am CSS-Tricks.. Du solltest erhalten Sie den Newsletter.

• Coinsmart. Europas beste Bitcoin- und Krypto-Börse.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. DEN FREIEN ZUGANG.
• CryptoHawk. Altcoin-Radar. Kostenlose Testphase.
• Quelle: https://css-tricks.com/single-element-loaders-the-spinner/