Single Element Loaders: Die Balken

Spinner haben wir uns angesehen. Punkte haben wir uns angesehen. Jetzt nehmen wir uns ein weiteres gängiges Muster für Loader vor: Balken. Und in diesem dritten Artikel der Serie machen wir dasselbe wie in den anderen: Wir erstellen sie mit nur einem Element und mit flexiblem CSS, das die Erstellung von Variationen erleichtert.

Beginnen wir mit nicht einem, nicht zwei, sondern 20 Beispielen für Balken-Loader.

Was?! Wirst du jeden einzelnen davon im Detail erklären? Das ist zu viel für einen Artikel!

Das mag auf den ersten Blick so erscheinen! Aber sie alle basieren auf derselben Code-Struktur und wir ändern nur wenige Werte, um Variationen zu erzeugen. Das ist die ganze Macht von CSS. Wir lernen nicht, wie man einen Loader erstellt, sondern wir lernen verschiedene Techniken, die es uns ermöglichen, so viele Loader zu erstellen, wie wir wollen, indem wir lediglich dieselbe Code-Struktur verwenden.

Lasst uns Balken erstellen!

Wir beginnen mit der Definition der Abmessungen für sie mit width (oder height) und aspect-ratio, um die Proportionen beizubehalten.

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

Wir "fälschen" quasi drei Balken mit einem linearen Farbverlauf im Hintergrund – ganz ähnlich, wie wir die Punkt-Loader 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 folgendes Ergebnis

Wie bei den anderen Artikeln dieser Serie werden wir uns mit vielen background-Tricks beschäftigen. Wenn Sie also jemals das Gefühl haben, dass wir zu schnell voranschreiten oder Sie mehr Details benötigen, schauen Sie sich diese unbedingt an. Sie können auch meine Stack Overflow-Antwort lesen, in der ich eine detaillierte Erklärung dazu gebe, wie das alles funktioniert.

Die Balken animieren

Wir animieren entweder die Größe oder die Position des Elements, um den Balken-Loader zu erstellen. Animieren wir die Größe, indem wir 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 die Animation die background-size des Hintergrundverlaufs des Elements. Jeder Keyframe setzt drei Hintergrundgrößen (eine für jeden Farbverlauf).

Und hier ist, was wir erhalten

Können Sie sich all die möglichen Variationen vorstellen, die wir durch das Spielen mit verschiedenen Animationskonfigurationen für die Größen oder Positionen erzielen können?

Lassen Sie uns die Größe auf 20% 50% festlegen und dieses Mal die Positionen aktualisieren

.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 Loader einbringt!

Sie haben den Trick jetzt wahrscheinlich verstanden. Alles, was Sie brauchen, ist, eine Zeitachse zu definieren, die Sie in einen Keyframe übersetzen. Durch die Animation der Größe, der Position – oder beider! – stehen uns unendlich viele Loader-Möglichkeiten zur Verfügung.

Und wenn wir uns mit einer solchen Technik wohlfühlen, können wir noch weiter gehen und einen komplexeren Farbverlauf verwenden, um noch *mehr* Loader zu erstellen.

Mit Ausnahme der letzten beiden Beispiele in dieser Demo verwenden alle Balken-Loader denselben zugrundeliegenden Markup und Stil und unterschiedliche Kombinationen von Animationen. Öffnen Sie den Code und versuchen Sie, jeden Frame einzeln zu visualisieren; Sie werden sehen, wie relativ trivial es ist, Dutzende – wenn nicht Hunderte – von Variationen zu erstellen.

Schick werden

Erinnern Sie sich an den Masken-Trick, den wir bei den Punkt-Loadern im zweiten Artikel dieser Serie gemacht haben? Das können wir hier auch machen!

Wenn wir die gesamte obige Logik in die mask-Eigenschaft einbauen, können wir jede beliebige Hintergrundkonfiguration verwenden, um unseren Loadern eine schicke Farbgebung zu verleihen.

Nehmen wir eine Demo und aktualisieren sie

Alles, was ich getan habe, ist, alle background-* durch mask-* zu ersetzen und eine Farbverlauf-Kolorierung hinzuzufügen. So einfach ist das, und doch erhalten wir einen weiteren coolen Loader.

Gibt es also keinen Unterschied zwischen den Punkten und den Balken?

Keinen Unterschied! Ich habe zwei verschiedene Artikel geschrieben, um möglichst viele Beispiele abzudecken, aber in beiden greife ich auf dieselben Techniken zurück:

1. Farbverläufe, um die Formen zu erstellen (Punkte oder Balken oder vielleicht etwas anderes)
2. Animation von background-size und/oder background-position, um die Loader-Animation zu erstellen
3. Hinzufügen von Masken, um einen Hauch von Farbe zu verleihen

Die Balken abrunden

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

Mit einem Element und seinen ::before und ::after Pseudoelementen 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 ergibt drei Balken, dieses Mal ohne einen linearen Farbverlauf.

Jetzt kommt der Trick, diese Balken mit einem schönen Farbverlauf zu füllen. Um einen kontinuierlichen Farbverlauf zu simulieren, müssen wir mit background-Eigenschaften spielen. In der obigen Abbildung definiert der grüne Bereich die vom Loader abgedeckte Fläche. Diese Fläche sollte die Größe des Farbverlaufs haben, und wenn wir die Rechnung durchführen, entspricht dies dem Multiplizieren beider Seiten, die im Diagramm mit S beschriftet sind, oder background-size: var(--s) var(--s).

Da unsere Elemente einzeln platziert sind, müssen wir die Position des Farbverlaufs innerhalb jedes einzelnen Elements aktualisieren, um sicherzustellen, dass sie alle überlappen. Auf diese Weise simulieren wir einen kontinuierlichen Farbverlauf, obwohl es eigentlich drei sind.

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

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

Für das linke Pseudoelement muss der Hintergrund links liegen.

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

Und für das rechte Pseudoelement muss der Hintergrund rechts positioniert sein.

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

Mit derselben CSS-Variable, --_i, die wir für die Translation verwendet haben, können wir den Code wie folgt 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; }

Nun 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:

Zusammenfassung

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

Bis zum nächsten Artikel lasse ich Sie mit einer lustigen Sammlung von Loadern zurück, bei denen ich die Punkte und die Balken kombiniere!