Einzelelementlader: Die Stangen

Wir haben uns Spinner angeschaut. Wir haben Punkte betrachtet. Jetzt werden wir uns mit einem anderen gängigen Muster für Loader befassen: Riegel. Und wir werden in diesem dritten Artikel der Serie dasselbe tun wie in den anderen, indem wir es mit nur einem Element und mit flexiblem CSS machen, das es einfach macht, Variationen zu erstellen.

Beginnen wir mit nicht einem, nicht zwei, sondern 20 Beispielen für Stangenlader.

Was?! Werden Sie jeden von ihnen detailliert beschreiben? Das ist zu viel für einen Artikel!

Das mag auf den ersten Blick so aussehen! Aber alle basieren auf der gleichen Codestruktur und wir aktualisieren nur wenige Werte, um Variationen zu erstellen. Das ist die ganze Macht von CSS. Wir lernen nicht, wie man einen Loader erstellt, aber wir lernen verschiedene Techniken kennen, die es uns ermöglichen, so viele Loader zu erstellen, wie wir wollen, indem wir lediglich dieselbe Codestruktur verwenden.

Lass uns ein paar Riegel machen!

Wir beginnen mit der Definition der Abmessungen für sie mit width (oder height) mit aspect-ratio Verhältnis halten:

.bars { width: 45px; aspect-ratio: 1;
}

Wir „fälschen“ drei Balken mit einem linearen Farbverlauf im Hintergrund – sehr ähnlich wie wir Dotloader in Teil 2 dieser Serie erstellt haben.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Der obige Code liefert uns das folgende Ergebnis:

Wie in den anderen Artikeln dieser Serie werden wir uns mit vielen befassen background Trickserei. Wenn Sie also jemals das Gefühl haben, dass wir zu schnell herumspringen, oder das Gefühl haben, dass Sie etwas mehr Details benötigen, sehen Sie sich diese bitte an. Sie können auch meine lesen Stack Overflow-Antwort, wo ich gebe eine ausführliche Erklärung wie das alles funktioniert.

Animieren der Balken

Wir animieren entweder die Größe oder Position des Elements, um den Stangenlader zu erstellen. Lassen Sie uns die Größe animieren, indem Sie die folgenden Animations-Keyframes definieren:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Sehen Sie, was dort passiert? Zwischen 0 % und 100 % ändert sich die Animation background-size des Hintergrundgradienten des Elements. Jeder Keyframe legt drei Hintergrundgrößen fest (eine für jeden Farbverlauf).

Und hier ist, was wir bekommen:

Können Sie sich all die möglichen Variationen vorstellen, die wir erhalten können, wenn wir mit verschiedenen Animationskonfigurationen für die Größen oder Positionen spielen?

Legen wir die Größe fest auf 20% 50% und aktualisiere diesmal die Positionen:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…was uns einen weiteren Lader einbringt!

Wahrscheinlich hast du den Trick inzwischen verstanden. Sie müssen lediglich eine Zeitleiste definieren, die Sie in einen Keyframe übersetzen. Indem Sie die Größe, die Position oder beides animieren! — uns stehen unendlich viele Ladermöglichkeiten zur Verfügung.

Und sobald wir uns mit einer solchen Technik vertraut gemacht haben, können wir weiter gehen und einen komplexeren Farbverlauf verwenden, um einen gleichmäßigen Farbverlauf zu erzeugen mehr Lader.

Erwarten Sie für die letzten beiden Beispiele in dieser Demo, dass alle Bar Loader das gleiche zugrunde liegende Markup und die gleichen Stile und unterschiedliche Kombinationen von Animationen verwenden. Öffnen Sie den Code und versuchen Sie, jeden Frame unabhängig voneinander zu visualisieren. Sie werden sehen, wie relativ trivial es ist, Dutzende zu machen – wenn nicht Hunderte - von Variationen.

Lust bekommen

Erinnerst du dich an den Maskentrick, den wir mit den Dotloadern gemacht haben? der zweite Artikel dieser Serie? Das können wir hier auch!

Wenn wir die gesamte obige Logik innerhalb der anwenden mask -Eigenschaft können wir jede Hintergrundkonfiguration verwenden, um unseren Loadern eine ausgefallene Färbung zu verleihen.

Nehmen wir eine Demo und aktualisieren sie:

Alles, was ich getan habe, ist, alle zu aktualisieren background-* mit mask-* und ich fügte eine Verlaufsfärbung hinzu. So einfach ist das und trotzdem bekommen wir einen weiteren coolen Loader.

Es gibt also keinen Unterschied zwischen den Punkten und den Balken?

Kein Unterschied! Ich habe zwei verschiedene Artikel geschrieben, um so viele Beispiele wie möglich abzudecken, aber in beiden verlasse ich mich auf die gleichen Techniken:

1. Farbverläufe zum Erstellen der Formen (Punkte oder Balken oder vielleicht etwas anderes)
2. Animieren background-size und / oder background-position um die Loader-Animation zu erstellen
3. Maske hinzufügen, um einen Hauch von Farbe hinzuzufügen

Abrunden der Balken

Versuchen wir diesmal etwas anderes, bei dem wir die Kanten unserer Balken abrunden können.

Mit einem Element und seinem ::before und ::after Pseudos definieren wir drei identische Balken:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Das gibt uns drei Balken, diesmal ohne sich auf einen linearen Gradienten zu verlassen:

Jetzt besteht der Trick darin, diese Balken mit einem schönen Farbverlauf zu füllen. Um einen kontinuierlichen Farbverlauf zu simulieren, müssen wir damit spielen background Eigenschaften. In der obigen Abbildung definiert der grüne Bereich den vom Lader abgedeckten Bereich. Dieser Bereich sollte die Größe des Farbverlaufs haben, und wenn wir rechnen, entspricht er der Multiplikation beider beschrifteten Seiten S im Diagramm bzw background-size: var(--s) var(--s).

Da unsere Elemente einzeln platziert werden, müssen wir die Position des Farbverlaufs in jedem Element aktualisieren, um sicherzustellen, dass sich alle überlappen. Auf diese Weise simulieren wir einen kontinuierlichen Gradienten, obwohl es eigentlich drei davon sind.

Für das Hauptelement (in der Mitte platziert) muss der Hintergrund in der Mitte sein. Wir verwenden Folgendes:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Für das Pseudo-Element links brauchen wir den Hintergrund links

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

Und für das Pseudo rechts muss der Hintergrund rechts positioniert werden:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Verwenden Sie dieselbe CSS-Variable, --_i, die wir für die Übersetzung verwendet haben, können wir den Code so schreiben:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Jetzt müssen wir nur noch die Höhe animieren und einige Verzögerungen hinzufügen! Hier sind drei Beispiele, bei denen sich nur die Farben und Größen unterscheiden:

Wrapping up

Ich hoffe, dass Sie sich bisher durch all die Kräfte, die Sie haben, um komplex aussehende Ladeanimationen zu erstellen, sehr ermutigt fühlen. Alles, was wir brauchen, ist ein Element, entweder Farbverläufe oder Pseudos, um die Balken zu zeichnen, und dann einige Keyframes, um Dinge zu bewegen. Das ist das gesamte Rezept für eine endlose Anzahl von Möglichkeiten, also gehen Sie raus und fangen Sie an, ein paar nette Sachen zu kochen!

Bis zum nächsten Artikel hinterlasse ich Ihnen eine lustige Sammlung von Ladern, in denen ich kombiniere die Punkte und die Bars!

---

Einzelelementlader: Die Stangen 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-bars/