Einzelelement-Lader: Ab ins 3D!

Für diesen vierten und letzten Artikel unserer Kleinserien an Einelementladern, werden wir 3D-Muster untersuchen. Beim Erstellen eines 3D-Elements ist es schwer vorstellbar, dass nur ein HTML-Element ausreicht, um so etwas wie alle sechs Seiten eines Würfels zu simulieren. Aber vielleicht kommen wir mit etwas mehr Würfel davonGefällt mir Stattdessen zeigen wir nur die vorderen drei Seiten der Form – das ist absolut möglich und das werden wir gemeinsam tun.

Der Split-Cube-Loader

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

Jede Hälfte des Würfels besteht aus einem Pseudoelement:

Geil, oder?! Wir können einen konischen Farbverlauf mit CSS verwenden clip-path auf dem Element ::before und ::after Pseudos, um die drei sichtbaren Seiten eines 3D-Würfels zu simulieren. Der negative Rand zieht die beiden Pseudos zusammen, um sich zu überlappen und einen vollen Würfel zu simulieren. Der Rest unserer Arbeit besteht hauptsächlich darin, diese beiden Hälften zu animieren, um ordentlich aussehende Lader zu erhalten!

Schauen wir uns ein Bild an, das die Mathematik hinter den Clip-Pfadpunkten erklärt, die zum Erstellen dieses würfelähnlichen Elements verwendet werden:

Wir haben unsere Variablen und eine Gleichung, also lassen Sie uns damit arbeiten. Zuerst legen wir unsere Variablen fest und legen die Größe für die Hauptdatei fest .loader Element:

.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 allzu Verrücktes. Wir haben ein 150px Quadrat, das als flexibler Behälter eingerichtet ist. Jetzt stellen wir unsere Pseudos her:

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

Das sind zwei Hälften in der .loader Container. Wir müssen sie einfärben, also ist das unsere konischer Gradient tritt ein:

.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);
}

Die Steigung ist da, aber Es sieht seltsam aus. Wir müssen befestigen Sie es am Element:

.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));
}

Stellen wir sicher, dass sich die beiden Hälften mit a überlappen negative Marge:

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

Jetzt lass sie uns 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 letzte Demo:

Der Fortschrittswürfellader

Lassen Sie uns dieselbe Technik verwenden, um einen 3D-Fortschrittslader zu erstellen. Ja, immer noch nur ein Element!

Wir ändern nichts, da wir den Würfel genauso simulieren wie zuvor, außer der Änderung der Höhe und des Seitenverhältnisses des Loaders. 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 den verbleibenden Platz ausfüllt, dank flex-grow: 1.

Der erste Schritt besteht darin, mit etwas Transparenz auf der rechten Seite hinzuzufügen opacity:

Dies simuliert den Effekt, dass eine Seite des Würfels ausgefüllt ist, während die andere leer ist. Dann aktualisieren wir die Farbe der linken Seite. Dazu aktualisieren wir entweder die drei Farben innerhalb des konischen Farbverlaufs oder fügen eine Hintergrundfarbe mit a hinzu background-blend-mode:

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

Dieser Trick erlaubt uns nur, die Farbe nur einmal zu aktualisieren. Die rechte Seite des Loaders fügt sich in die drei Weißtöne des konischen Verlaufs ein, um drei neue Schattierungen unserer Farbe zu erstellen, obwohl wir nur einen Farbwert verwenden. Farbtrick!

Lassen Sie uns die Breite der linken Seite des Laders animieren:

Ups, die Animation ist am Anfang etwas seltsam! Beachten Sie, wie es außerhalb des Würfels beginnt? Dies liegt daran, dass wir die Animation am starten 0% Breite. Aber aufgrund der clip-path und negativer Marge, die wir verwenden, müssen wir stattdessen bei unserer beginnen --_d Variable, mit der wir die definiert haben clip-path Punkte und die negative Marge:

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

Das ist etwas besser:

Aber wir können diese Animation noch flüssiger machen. Haben Sie bemerkt, dass uns etwas fehlt? Lassen Sie mich Ihnen einen Screenshot zeigen, um zu vergleichen, wie die endgültige Demo mit dieser 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 sollte da sein!

Wir können dem Hauptelement einen Farbverlauf hinzufügen und es beschneiden, wie wir es mit den Pseudos getan haben:

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

Hier ist der vollständige Code, sobald alles zusammengezogen 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 ist es! Wir haben einfach eine clevere Technik verwendet, die Pseudo-Elemente, konische Farbverläufe, Clipping, Hintergrundüberblendung und negative Ränder verwendet, um nicht nur einen, sondern einen zu erhalten XNUMX süß aussehende 3D-Loader mit nicht mehr als einem einzigen Element im Markup.

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 Raster aus Würfeln:

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

Verrückt, oder? Jetzt erstellen wir ein sich wiederholendes Muster aus Würfeln, die aus einem einzigen Element bestehen … und auch keine Pseudos! Ich werde nicht ins Detail auf die Mathematik eingehen, die wir verwenden (es gibt sehr spezifische Zahlen darin), aber hier ist eine Abbildung, um zu veranschaulichen, wie wir hierher gekommen sind:

Wir verwenden zuerst a conic-gradient um das sich wiederholende Würfelmuster zu erstellen. Die Wiederholung des Musters wird durch drei Variablen gesteuert:

• --size: Getreu seinem Namen 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 die Lücke oder 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 Maskenschicht mit einem anderen Muster gleicher Größe an. Dies ist der schwierigste Teil dieser Idee. Mit einer Kombination aus a linear-gradient und einem conic-gradient Wir werden einige Teile unseres Elements ausschneiden, damit nur die Würfelformen sichtbar bleiben.

.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 ein paar Werte aktualisieren, um unsere Würfelmatrix zu steuern. Benötigen Sie ein 10⨉10-Raster? Aktualisieren Sie die --m und --n Variablen zu 10. Benötigen Sie einen größeren Abstand zwischen den Würfeln? Aktualisieren Sie die --gap Wert. Die Farbwerte werden nur einmal verwendet, also aktualisieren Sie diese für eine neue Farbpalette!

Nun, da wir eine andere 3D-Technik haben, verwenden wir sie, um Variationen des Laders zu erstellen, indem wir mit verschiedenen Animationen herumspielen. Wie wäre es zum Beispiel mit einem sich wiederholenden Muster aus Würfeln, die endlos von links nach rechts gleiten?

Dieser Loader definiert vier Cubes in einer einzelnen Zeile. Das bedeutet unsere --n Wert ist 4 und --m entspricht 1 . Mit anderen Worten, wir brauchen diese nicht mehr!

Stattdessen können wir mit dem arbeiten --size und --gap Variablen in einem Grid-Container:

.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 immer nur drei im Container zeigen, damit wir immer einen hineinschieben und einen herausschieben. Deshalb faktorisieren wir die Breite um 3 und haben das Seitenverhältnis auf eingestellt 3 .

Stellen wir sicher, dass unser Würfelmuster für die Breite von vier Würfeln eingerichtet ist. Wir werden dies auf den Containern tun ::before Pseudoelement:

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

Jetzt, da wir vier Würfel in einem Container mit drei Würfeln haben, können wir das Würfelmuster bis zum Ende des Gittercontainers ausrichten, um ihn zu überlaufen, wobei die letzten drei Würfel angezeigt werden:

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

Hier ist, was wir bisher haben, mit einer roten Umrandung, um die Grenzen des Rastercontainers anzuzeigen:

Jetzt müssen wir nur noch das Pseudo-Element nach rechts verschieben, indem wir unsere Animation hinzufügen:

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

Hast du den Trick der Animation verstanden? Lassen Sie uns dies abschließen, indem wir das überfließende Würfelmuster ausblenden und einen Hauch von Maskierung hinzufügen, um diesen verblassenden Effekt zu erzeugen, der den Anfang und das Ende bildet:

.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 machen, indem wir eine Variable einführen, --n, um festzulegen, wie viele Würfel gleichzeitig im Container angezeigt werden. Und da die Gesamtzahl der Würfel im Muster eins mehr als sein sollte --n, wir können das ausdrücken als calc(var(--n) + 1).

Hier ist das Ganze:

OK, noch ein ähnlicher 3D-Loader, bei dem die Würfel nacheinander die Farbe ändern, anstatt zu gleiten:

Wir werden uns auf einen animierten Hintergrund mit verlassen background-blend-mode für dieses:

.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 statt vier Würfeln. Was ich hier hinzufüge, ist ein Farbverlauf, der mit einer bestimmten Farbe definiert ist, die sich in den konischen Farbverlauf einfügt, so wie wir es zuvor für den 3D-Loader für den Fortschrittsbalken getan haben.

Von dort animiert es den Hintergrundverlauf background-position als dreistufige Animation, um die Würfel einzeln zum Blinken zu bringen.

Wenn Sie mit den Werten, die ich verwende, nicht vertraut sind background-position und die Hintergrundsyntax kann ich nur empfehlen einer meiner vorherigen Artikel und einer meine Stack Overflow-Antworten. Dort finden Sie eine sehr ausführliche Erklärung.

Können wir die Anzahl der Würfel aktualisieren, um sie variabel zu machen?

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

Variationen in Hülle und Fülle!

Wie bei den anderen drei Artikeln dieser Serie möchte ich Sie mit etwas Inspiration verlassen, um loszulegen und Ihre eigenen Lader zu erstellen. Hier ist eine Sammlung, die die 3D-Loader enthält, die wir zusammen erstellt haben, sowie einige andere, um Ihrer Fantasie freien Lauf zu lassen:

Das ist ein Wrap

Ich hoffe sehr, dass es Ihnen in den letzten Wochen Spaß gemacht hat, mit mir Einzelelementlader zu bauen. Es ist verrückt, dass wir mit scheinbar einfachen Spinnern begonnen und dann nach und nach neue Teile 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 Stärken nutzen: skalierbar, flexibel und wiederverwendbar.

Nochmals vielen Dank für das Lesen dieser kleinen Serie! Ich melde mich ab, indem ich Sie daran erinnere, dass ich eine habe Sammlung von mehr als 500 Ladern wenn Sie nach weiteren Ideen und Inspirationen suchen.

---

Einzelelement-Lader: Ab ins 3D! 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-going-3d/