Single Element Loaders: Going 3D!

Für diesen vierten und letzten Artikel unserer kleinen Serie über Single-Element-Loader, werden wir uns 3D-Muster ansehen. Beim Erstellen eines 3D-Elements ist es schwer vorstellbar, dass ein HTML-Element ausreicht, um so etwas wie alle sechs Seiten eines Würfels zu simulieren. Aber vielleicht kommen wir mit etwas Würfel-ähnlichem stattdessen davon, indem wir nur die drei Vorderseiten der Form zeigen – das ist absolut möglich und genau das werden wir gemeinsam tun.

Der aufgeteilte Würfel-Loader

Hier ist ein 3D-Loader, bei dem ein Würfel in zwei Teile geteilt ist, aber nur aus einem einzigen Element besteht

Jede Hälfte des Würfels wird mit einem Pseudo-Element erstellt

Cool, oder?! Wir können einen konischen Verlauf mit CSS clip-path auf den ::before- und ::after-Pseudoelementen des Elements verwenden, um die drei sichtbaren Flächen eines 3D-Würfels zu simulieren. Negativer Rand zieht die beiden Pseudoelemente zusammen, damit sie sich überlappen und einen vollen Würfel simulieren. Der Rest unserer Arbeit besteht hauptsächlich darin, diese beiden Hälften zu animieren, um nett aussehende Loader zu erhalten!

Schauen wir uns eine visuelle Darstellung an, die die Mathematik hinter den Clip-Path-Punkten erklärt, die zur Erstellung dieses würfelähnlichen Elements verwendet werden

Wir haben unsere Variablen und eine Gleichung, also lassen wir diese arbeiten. Zuerst stellen wir unsere Variablen auf und legen die Größe für das Haupt-.loader-Element fest

.loader {
  --s: 150px; /* control the size */
  --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */

  width: calc(var(--s) + var(--_d)); 
  aspect-ratio: 1;
  display: flex;
}

Bisher nichts Außergewöhnliches. Wir haben ein 150px Quadrat, das als flexibler Container eingerichtet ist. Jetzt definieren wir unsere Pseudoelemente

.loader::before,
.loader::after {
  content: "";
  flex: 1;
}

Das sind zwei Hälften im .loader-Container. Wir müssen sie bemalen, und da kommt unser konischer Verlauf ins Spiel

.loader::before,
.loader::after {
  content: "";
  flex: 1;
  background:
    conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d),
    #fff 135deg, #666 0 270deg, #aaa 0);
}

Der Verlauf ist da, aber er sieht komisch aus. Wir müssen ihn auf das Element zuschneiden

.loader::before,
.loader::after {
  content: "";
  flex: 1;
  background:
    conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d),
    #fff 135deg, #666 0 270deg, #aaa 0);
  clip-path:
    polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

Lassen Sie uns sicherstellen, dass sich die beiden Hälften mit einem negativen Rand überlappen

.loader::before {
  margin-right: calc(var(--_d) / -2);
}

.loader::after {
  margin-left: calc(var(--_d) / -2);
}

Jetzt lassen wir sie sich bewegen!

.loader::before,
.loader::after {
  /* same as before */
  animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
}

.loader::after {
  /* same as before */
  animation-delay: -.75s
}

@keyframes load{
  0%, 40%   { transform: translateY(calc(var(--s) / -4)) }
  60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

Hier ist noch einmal die finale Demo

Der Fortschritts-Würfel-Loader

Verwenden wir dieselbe Technik, um einen 3D-Fortschritts-Loader zu erstellen. Ja, immer noch nur ein Element!

Wir ändern nichts an der Simulation des Würfels, wie wir es zuvor getan haben, abgesehen von der Änderung der Höhe und des Seitenverhältnisses des Laders. Die Animation, die wir erstellen, basiert auf einer überraschend einfachen Technik, bei der wir die Breite der linken Seite aktualisieren, während die rechte Seite dank flex-grow: 1 den restlichen Platz ausfüllt.

Der erste Schritt ist, der rechten Seite mit opacity etwas Transparenz zu verleihen

Dies simuliert den Effekt, dass eine Seite des Würfels gefüllt ist, während die andere leer ist. Dann aktualisieren wir die Farbe der linken Seite. Dazu aktualisieren wir entweder die drei Farben im konischen Verlauf oder wir tun dies, indem wir eine Hintergrundfarbe mit einem background-blend-mode hinzufügen

.loader::before {
  background-color: #CC333F; /* control the color here */
  background-blend-mode: multiply;
}

Dieser Trick erlaubt es uns nur, die Farbe einmal zu aktualisieren. Die rechte Seite des Laders mischt sich mit den drei Weißtönen aus dem konischen Verlauf, um drei neue Farbtöne unserer Farbe zu erzeugen, obwohl wir nur einen Farbwert verwenden. Farbetrickerei!

Animieren wir die Breite der linken Seite des Laders

Hoppla, die Animation ist am Anfang etwas seltsam! Beachten Sie, wie sie quasi außerhalb des Würfels beginnt? Das liegt daran, dass wir die Animation bei 0% Breite starten. Aber aufgrund des clip-path und des negativen Rands, den wir verwenden, müssen wir stattdessen vom --_d-Variable aus starten, die wir zur Definition der clip-path-Punkte und des negativen Rands verwendet haben

@keyframes load {
  0%,
  5% {width: var(--_d); }
  95%,
  100% {width: 100%; }
}

Das ist schon besser

Aber wir können diese Animation noch flüssiger gestalten. Haben Sie bemerkt, dass etwas fehlt? Ich zeige Ihnen einen Screenshot, um zu vergleichen, wie die finale Demo im Vergleich zur letzten Demo aussehen sollte

Es ist die Unterseite des Würfels! Da das zweite Element transparent ist, müssen wir die Unterseite dieses Rechtecks sehen, wie Sie im linken Beispiel sehen können. Es ist subtil, aber es sollte da sein!

Wir können dem Hauptelement einen Verlauf hinzufügen und es zuschneiden, wie wir es bei den Pseudoelementen getan haben

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Hier ist der vollständige Code, wenn alles zusammengefügt ist

.loader {
  --s: 100px; /* control the size */
  --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */

  height: var(--s); 
  aspect-ratio: 3;
  display: flex;
  background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;
  clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after {
  content: "";
  clip-path: inherit;
  background:
    conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d),
     #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before {
  background-color: #CC333F; /* control the color here */
  background-blend-mode: multiply;
  margin-right: calc(var(--_d) / -2);
  animation: load 2.5s infinite linear;
}
.loader:after {
  flex: 1;
  margin-left: calc(var(--_d) / -2);
  opacity: 0.4;
}

@keyframes load {
  0%,
  5% { width: var(--_d); }
  95%,
  100% { width: 100%; }
}

Das war's! Wir haben gerade eine clevere Technik verwendet, die Pseudo-Elemente, konische Verläufe, Clipping, Hintergrundmischung und negative Ränder nutzt, um nicht einen, sondern zwei gut aussehende 3D-Loader mit nichts weiter als einem einzigen Element im Markup zu erhalten.

Mehr 3D

Wir können noch weiter gehen und eine unendliche Anzahl von 3D-Würfeln mit einem Element simulieren – ja, das ist möglich! Hier ist ein Gitter aus Würfeln

Diese Demo und die folgenden Demos werden zum Zeitpunkt der Erstellung in Safari nicht unterstützt.

Verrückt, oder? Jetzt erstellen wir ein sich wiederholendes Muster von Würfeln, die mit einem einzigen Element erstellt wurden... und auch ohne Pseudoelemente! Ich werde nicht ins Detail über die verwendete Mathematik gehen (es gibt sehr spezifische Zahlen darin), aber hier ist eine Grafik, um zu visualisieren, wie wir dorthin gelangt sind

Wir verwenden zunächst einen conic-gradient, um das sich wiederholende Würfelmuster zu erstellen. Die Wiederholung des Musters wird durch drei Variablen gesteuert

• --size: seinem Namen getreu steuert dies die Größe jedes Würfels.
• --m: Dies repräsentiert die Anzahl der Spalten.
• --n: Dies ist die Anzahl der Zeilen.
• --gap: Dies ist der Abstand zwischen den Würfeln

.cube {
  --size: 40px; 
  --m: 4; 
  --n: 5;
  --gap :10px;

  aspect-ratio: var(--m) / var(--n);
  width: calc(var(--m) * (1.353 * var(--size) + var(--gap)));
  background:
    conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)),
      #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */
    0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Dann wenden wir eine Maskierungsschicht mit einem weiteren Muster derselben Größe an. Dies ist der kniffligste Teil dieser Idee. Durch die Kombination eines linear-gradient und eines conic-gradient schneiden wir einige Teile unseres Elements ab, um nur die Würfelformen sichtbar zu halten.

.cube {
  /* etc. */
  mask: 
    linear-gradient(to bottom right,
       #0000 calc(0.25 * var(--size)),
       #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)),
       #0000 0),
    conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0);  
  mask-size: calc(100% / var(--m)) calc(100% / var(--n));
  mask-composite: intersect;
}

Der Code mag etwas komplex aussehen, aber dank CSS-Variablen müssen wir nur wenige Werte ändern, um unsere Matrix von Würfeln zu steuern. Brauchen Sie ein 10x10-Gitter? Ändern Sie die Variablen --m und --n auf 10. Brauchen Sie einen größeren Abstand zwischen den Würfeln? Ändern Sie den Wert --gap. Die Farbwerte werden nur einmal verwendet, ändern Sie diese also für eine neue Farbpalette!

Nachdem wir nun eine weitere 3D-Technik haben, lassen Sie uns diese nutzen, um Variationen des Laders durch verschiedene Animationen zu erstellen. Wie wäre es zum Beispiel mit einem sich wiederholenden Muster von Würfeln, die unendlich von links nach rechts gleiten?

Dieser Lader definiert vier Würfel in einer einzigen Reihe. Das bedeutet, unser --n-Wert ist 4 und --m ist gleich 1. Mit anderen Worten, wir brauchen diese nicht mehr!

Stattdessen können wir mit den Variablen --size und --gap in einem Gittercontainer arbeiten

.loader {
  --size: 70px;
  --gap: 15px;  

  width: calc(3 * (1.353 * var(--size) + var(--gap)));
  display: grid;
  aspect-ratio: 3;
}

Das ist unser Container. Wir haben vier Würfel, wollen aber nur drei gleichzeitig im Container anzeigen, damit immer einer herausgleitet, während einer hineingleitet. Deshalb multiplizieren wir die Breite mit 3 und setzen das Seitenverhältnis ebenfalls auf 3.

Lassen Sie uns sicherstellen, dass unser Würfelmuster für die Breite von vier Würfeln eingerichtet ist. Das machen wir auf dem ::before-Pseudoelement des Containers

.loader::before { 
  content: "";
  width: calc(4 * 100% / 3);
  /*
     Code to create four cubes
  */
}

Nachdem wir nun vier Würfel in einem Drei-Würfel-Container haben, können wir das Würfelmuster am Ende des Gittercontainers ausrichten, um es überlaufen zu lassen und die letzten drei Würfel anzuzeigen

.loader {
  /* same as before */
  justify-content: end;
}

So sieht es bisher aus, mit einer roten Umrandung, um die Grenzen des Gittercontainers zu zeigen

Jetzt müssen wir nur noch das Pseudoelement nach rechts bewegen, indem wir unsere Animation hinzufügen

@keyframes load {
  to { transform: translate(calc(100% / 4)); }
}

Haben Sie den Trick der Animation verstanden? Lassen Sie uns dies abschließen, indem wir das überlaufende Würfelmuster verstecken und einen Hauch von Maskierung hinzufügen, um diesen Verblassungseffekt am Anfang und Ende zu erzeugen.

.loader {
  --size: 70px;
  --gap: 15px;  
  
  width: calc(3*(1.353*var(--s) + var(--g)));
  display: grid;
  justify-items: end;
  aspect-ratio: 3;
  overflow: hidden;
  mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

Wir können dies viel flexibler gestalten, indem wir eine Variable, --n, einführen, um festzulegen, wie viele Würfel gleichzeitig im Container angezeigt werden. Und da die Gesamtzahl der Würfel im Muster eins mehr als --n sein sollte, können wir dies als calc(var(--n) + 1) ausdrücken.

Hier ist das Ganze

Okay, noch ein 3D-Loader, der ähnlich ist, aber die Würfel wechseln nacheinander die Farbe, anstatt zu gleiten

Dafür werden wir uns auf einen animierten Hintergrund mit background-blend-mode verlassen

.loader {
  /* ... */
  background:
    linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat,
    /* ... */;
  background-blend-mode: multiply;
  /* ... */
  animation: load steps(3) 1.5s infinite;
}
@keyframes load {
  to { background-position: 150%; }
}

Ich habe den überflüssigen Code entfernt, der verwendet wurde, um das gleiche Layout wie im letzten Beispiel zu erstellen, aber mit drei Würfeln anstelle von vier. Was ich hier hinzufüge, ist ein Verlauf, der mit einer bestimmten Farbe definiert ist, die sich mit dem konischen Verlauf mischt, genau wie wir es zuvor für den 3D-Loader des Fortschrittsbalkens getan haben.

Von dort aus animieren wir die background-position des Hintergrundverlaufs als dreistufige Animation, damit die Würfel nacheinander die Farben blinken.

Wenn Sie mit den Werten, die ich für background-position und die Hintergrundsyntax verwende, nicht vertraut sind, empfehle ich dringend einen meiner früheren Artikel und eine meiner Stack Overflow-Antworten. Dort finden Sie eine sehr detaillierte Erklärung.

Können wir die Anzahl der Würfel zu Variablen machen?

Ja, ich habe eine Lösung dafür, aber ich möchte, dass Sie sich daran versuchen, anstatt sie hier einzubetten. Nehmen Sie, was wir aus dem vorherigen Beispiel gelernt haben, und versuchen Sie dasselbe mit diesem – teilen Sie dann Ihre Arbeit in den Kommentaren!

Variationen im Überfluss!

Wie in den anderen drei Artikeln dieser Serie möchte ich Ihnen Inspiration geben, eigene Loader zu erstellen. Hier ist eine Sammlung, die die 3D-Loader enthält, die wir gemeinsam erstellt haben, sowie einige weitere, um Ihre Vorstellungskraft anzuregen

Das war's!

Ich hoffe wirklich, Sie hatten Spaß daran, in den letzten Wochen mit mir Single-Element-Loader zu erstellen. Es ist verrückt, dass wir mit scheinbar einfachen Spinnern angefangen haben und dann schrittweise neue Elemente hinzugefügt haben, um uns bis zu 3D-Techniken hochzuarbeiten, die immer noch nur ein einziges Element im Markup verwenden. Genau so sieht CSS aus, wenn wir seine Kräfte nutzen: skalierbar, flexibel und wiederverwendbar.

Vielen Dank nochmals für das Lesen dieser kleinen Serie! Ich verabschiede mich, indem ich Sie daran erinnere, dass ich eine Sammlung von mehr als 500 Loadern habe, falls Sie weitere Ideen und Inspiration suchen.