Single Element Loaders: Die Punkte

Wir beschäftigen uns in dieser Reihe mit Loadern. Mehr noch, wir zerlegen einige gängige Loader-Muster und wie man sie mit nichts als einem einzigen Div nachbildet. Bisher haben wir uns den klassischen rotierenden Loader vorgenommen. Nun schauen wir uns einen weiteren an, der Ihnen wahrscheinlich sehr bekannt ist: die Punkte.

Punkt-Loader sind überall. Sie sind raffiniert, weil sie normalerweise aus drei Punkten bestehen, die einer tanzenden Textellipse (...) ähneln.

Unser Ziel hier ist es, dasselbe aus einem einzigen Div-Element zu machen. Mit anderen Worten, es gibt kein Div pro Punkt oder einzelne Animationen für jeden Punkt.

Das obige Beispiel für einen Loader besteht aus einem einzigen Div-Element, einigen CSS-Deklarationen und keinen Pseudo-Elementen. Ich kombiniere zwei Techniken, die CSS-background und mask verwenden. Und wenn wir fertig sind, werden wir sehen, wie die Animation eines Hintergrundverlaufs die Illusion erzeugt, dass jeder Punkt seine Farbe ändert, während er nacheinander auf und ab wandert.

Die Hintergrundanimation

Beginnen wir mit der Hintergrundanimation

.loader {
  width: 180px; /* this controls the size */
  aspect-ratio: 8/5; /* maintain the scale */
  background: 
    conic-gradient(red   50%, blue   0) no-repeat, /* top colors */
    conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */
  background-size: 200% 50%; 
  animation: back 4s infinite linear; /* applies the animation */
}

/* define the animation */
@keyframes back {
  0%,                       /* X   Y , X     Y */
  100% { background-position: 0%   0%, 0%   100%; }
  25%  { background-position: 100% 0%, 0%   100%; }
  50%  { background-position: 100% 0%, 100% 100%; }
  75%  { background-position: 0%   0%, 100% 100%; }
}

Ich hoffe, das sieht ziemlich geradlinig aus. Wir haben ein 180px breites .loader-Element, das zwei konische Farbverläufe mit harten Farbstopps zwischen jeweils zwei Farben aufweist — der erste Farbverlauf ist rot und blau entlang der oberen Hälfte des .loader, und der zweite Farbverlauf ist grün und lila entlang der unteren Hälfte.

Da die Hintergrundgröße des Loaders (200% breit) so eingestellt ist, sehen wir jeweils nur eine dieser Farben in jeder Hälfte. Dann haben wir diese kleine Animation, die die Position dieser Hintergrundverläufe nach links, rechts und wieder zurück für immer verschiebt.

Wenn es um Hintergrundeigenschaften geht — insbesondere background-position — verweise ich immer auf meine Stack Overflow-Antwort, in der ich eine detaillierte Erklärung gebe, wie das alles funktioniert. Wenn Sie mit CSS-Hintergrund-Tricks nicht vertraut sind, empfehle ich dringend, diese Antwort zu lesen, um Ihnen bei dem zu helfen, was als Nächstes kommt.

In der Animation bemerken Sie, dass die erste Ebene Y=0% (oben platziert) ist, während X von 0% auf 100% wechselt. Für die zweite Ebene haben wir das Gleiche für X, aber Y=100% (unten platziert).

Warum conic-gradient() anstelle von linear-gradient() verwenden?

Gute Frage! Intuitiv sollten wir einen linearen Farbverlauf verwenden, um solche Zweifarbenverläufe zu erstellen

linear-gradient(90deg, red 50%, blue 0)

Aber wir können das Gleiche auch mit einem conic-gradient() erreichen — und mit weniger Code. Wir reduzieren den Code und lernen dabei noch einen neuen Trick!

Das Verschieben der Farben nach links und rechts ist eine gute Möglichkeit, es so aussehen zu lassen, als würden wir die Farben ändern, aber es wäre vielleicht besser, wenn wir die Farben stattdessen sofort ändern — so besteht keine Gefahr, dass ein Loader-Punkt zwei Farben gleichzeitig aufblitzt. Um dies zu erreichen, ändern wir die Timing-Funktion der animation von linear zu steps(1)

Die Loader-Punkte

Wenn Sie dem ersten Artikel dieser Serie gefolgt sind, wette ich, Sie wissen, was als Nächstes kommt: CSS-Masken! Was Masken so großartig macht, ist, dass sie uns erlauben, Teile eines Hintergrunds in der Form eines anderen Elements "auszuschneiden". In diesem Fall möchten wir einige Punkte erstellen, die Hintergrundverläufe durch die Punkte anzeigen und alle Teile des Hintergrunds ausschneiden, die nicht zu einem Punkt gehören.

Wir werden dafür radial-gradient() verwenden

.loader {
  width: 180px;
  aspect-ratio: 8/5;
  mask:
    radial-gradient(#000 68%, #0000 71%) no-repeat,
    radial-gradient(#000 68%, #0000 71%) no-repeat,
    radial-gradient(#000 68%, #0000 71%) no-repeat;
  mask-size: 25% 40%; /* the size of our dots */
}

Dort gibt es doppelten Code, also erstellen wir eine CSS-Variable, um die Dinge schlanker zu machen

.loader {
  width: 180px;
  aspect-ratio: 8/5;
  --_g: radial-gradient(#000 68%, #0000 71%) no-repeat;
  mask: var(--_g),var(--_g),var(--_g);
  mask-size: 25% 40%;
}

Gut, gut. Aber jetzt brauchen wir eine neue Animation, die hilft, die Punkte zwischen den animierten Farbverläufen auf und ab zu bewegen.

.loader {
  /* same as before */
  animation: load 2s infinite;
}

@keyframes load {      /* X  Y,     X   Y,    X   Y */
  0%     { mask-position: 0% 0%  , 50% 0%  , 100% 0%; } /* all of them at the top */
  16.67% { mask-position: 0% 100%, 50% 0%  , 100% 0%; }
  33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; }
  50%    { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */
  66.67% { mask-position: 0% 0%  , 50% 100%, 100% 100%; }
  83.33% { mask-position: 0% 0%  , 50% 0%  , 100% 100%; }
  100%   { mask-position: 0% 0%  , 50% 0%  , 100% 0%; } /* all of them at the top */
}

Ja, das sind insgesamt drei radiale Farbverläufe, alle mit der gleichen Konfiguration und der gleichen Größe — die Animation aktualisiert die Position jedes einzelnen. Beachten Sie, dass die X-Koordinate jedes Punkts fest ist. Die mask-position ist so definiert, dass der erste Punkt links (0%), der zweite in der Mitte (50%) und der dritte rechts (100%) ist. Wir aktualisieren nur die Y-Koordinate von 0% auf 100%, um die Punkte tanzen zu lassen.

Hier ist, was wir bekommen

Kombinieren Sie das jetzt mit unserer Farbverlaufsanimation und die Magie beginnt

Punkt-Loader-Variationen

Die CSS-Variable, die wir im letzten Beispiel erstellt haben, erleichtert das Einsetzen neuer Farben und das Erstellen weiterer Variationen desselben Loaders erheblich. Zum Beispiel verschiedene Farben und Größen

Wie wäre es mit einer anderen Bewegung für unsere Punkte?

Hier habe ich lediglich die Animation aktualisiert, um verschiedene Positionen zu berücksichtigen, und wir erhalten einen weiteren Loader mit der gleichen Code-Struktur!

Die Animationstechnik, die ich für die Maskenebenen verwendet habe, kann auch mit Hintergrundebenen verwendet werden, um viele verschiedene Loader mit einer einzigen Farbe zu erstellen. Ich habe einen ausführlichen Artikel darüber geschrieben. Sie werden sehen, dass wir aus derselben Code-Struktur verschiedene Variationen erstellen können, indem wir einfach ein paar Werte ändern. Ich teile am Ende des Artikels einige Beispiele.

Warum kein Loader mit einem Punkt?

Dieser sollte ziemlich einfach zu verstehen sein, da ich die gleiche Technik, aber mit einer einfacheren Logik verwende

Hier ist ein weiteres Beispiel für einen Loader, bei dem ich auch radial-gradient in Kombination mit CSS-Filtern und mix-blend-mode animiere, um einen blobigen Effekt zu erzeugen

Wenn Sie den Code prüfen, werden Sie sehen, dass ich eigentlich nur background-position animiere, genau wie beim vorherigen Loader, aber mit einem Schuss background-size, damit es so aussieht, als würde der Blob größer werden, während er Punkte absorbiert.

Wenn Sie den Zauber hinter diesem Blob-Effekt verstehen möchten, können Sie sich diese interaktiven Folien (nur Chrome) von Ana Tudor ansehen, da sie das Thema so gut behandelt!

Hier ist eine weitere Idee für einen Punkt-Loader, diesmal mit einer anderen Technik

Dieser besteht nur aus 10 CSS-Deklarationen und einem Keyframe. Das Hauptelement und seine beiden Pseudo-Elemente haben die gleiche Hintergrundkonfiguration mit einem radialen Farbverlauf. Jeder von ihnen erstellt einen Punkt, also insgesamt drei. Die Animation bewegt den Farbverlauf von oben nach unten, indem sie unterschiedliche Verzögerungen für jeden Punkt verwendet.

Oh, und beachten Sie, wie diese Demo CSS Grid verwendet. Dies ermöglicht es uns, die Standard-stretch-Ausrichtung des Grids zu nutzen, sodass beide Pseudo-Elemente den gesamten Bereich ihres Elternelements abdecken. Keine Größenanpassung erforderlich! Wir schieben sie ein wenig mit translate() herum und sind bereit.

Weitere Beispiele!

Nur um den Punkt zu verdeutlichen, möchte ich Ihnen noch einige zusätzliche Beispiele geben, die eigentlich Variationen dessen sind, was wir besprochen haben. Wenn Sie sich die Demos ansehen, werden Sie feststellen, dass die hier behandelten Ansätze äußerst flexibel sind und unzählige Designmöglichkeiten eröffnen.

Als Nächstes…

OK, wir haben uns also in diesem Artikel mit Punkt-Loadern und im letzten Artikel mit Spinnern beschäftigt. Im nächsten Artikel dieser vierteiligen Serie wenden wir uns einem weiteren gängigen Loader-Typ zu: den Balken. Wir werden viel von dem, was wir bisher gelernt haben, aufgreifen und sehen, wie wir es erweitern können, um einen weiteren Single-Element-Loader mit so wenig Code und so viel Flexibilität wie möglich zu erstellen.