Einzelelementlader: Die Punkte

Wir sehen uns Lader dieser Serie an. Darüber hinaus brechen wir einige gängige Loader-Muster auf und zeigen, wie man sie mit nicht mehr als einem einzigen div neu erstellt. Bisher haben wir auseinander genommen der klassische Spinnlader. Schauen wir uns nun eine andere an, die Ihnen wahrscheinlich bekannt ist: die Punkte.

Dotloader sind überall zu finden. Sie sind ordentlich, weil sie normalerweise aus drei Punkten bestehen, die wie eine Textauslassung (…) aussehen, die herumtanzt.

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

Das obige Beispiel eines Loaders besteht aus einem einzelnen div-Element, einigen CSS-Deklarationen und keinen Pseudoelementen. Ich kombiniere zwei Techniken mit CSS background und mask. Und wenn wir fertig sind, werden wir sehen, wie das Animieren eines Hintergrundverlaufs dazu beiträgt, die Illusion zu erzeugen, dass jeder Punkt seine Farbe ändert, wenn er sich nacheinander nach oben und unten bewegt.

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 einfach aus. Was wir haben, ist ein 180px-breit .loader Element, das zwei konische Farbverläufe mit harten Farbstopps zwischen jeweils zwei Farben zeigt – der erste Farbverlauf ist rot und blau entlang der oberen Hälfte des .loader, und der zweite Verlauf ist grün und lila entlang der unteren Hälfte.

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

Beim Umgang mit Hintergrundeigenschaften – besonders background-position — Ich beziehe mich immer auf meine Stack Overflow-Antwort, in der ich eine detaillierte Erklärung gebe wie das alles funktioniert. Wenn Ihnen CSS-Hintergrundtricks unangenehm sind, empfehle ich dringend, diese Antwort zu lesen, um bei dem, was als nächstes kommt, zu helfen.

Beachten Sie in der Animation, dass die erste Ebene ist Y=0% (oben platziert) während X ist Änderungen von 0% zu 100%. Für die zweite Schicht haben wir dasselbe für X aber Y=100% (unten platziert).

Warum mit einem conic-gradient() statt linear-gradient()?

Gute Frage! Intuitiv sollten wir einen linearen Farbverlauf verwenden, um zweifarbige Farbverläufe wie diesen zu erstellen:

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

Aber wir können auch mit a nach demselben greifen conic-gradient() – und mit weniger Code. Wir reduzieren den Code und lernen dabei auch noch einen neuen Trick!

Das Verschieben der Farben nach links und rechts ist eine nette Möglichkeit, es so aussehen zu lassen, als würden wir die Farben ändern, aber es könnte besser sein, wenn wir stattdessen sofort die Farben ändern – auf diese Weise besteht keine Chance, dass ein Ladepunkt zwei Farben gleichzeitig blinkt . Um dies zu tun, ändern wir die animation's Timing-Funktion aus linear zu steps(1)

Der Lader punktet

Wenn Sie zusammen mit dem folgten erster Artikel dieser Reihe, ich wette du weißt was als nächstes kommt: CSS-Masken! Was Masken so großartig macht, ist, dass sie uns gewissermaßen zulassen Teile eines Hintergrunds „ausschneiden“. in Form eines anderen Elements. In diesem Fall möchten wir also einige Punkte erstellen, die Hintergrundverläufe durch die Punkte anzeigen und alle Teile des Hintergrunds ausschneiden, die nicht Teil eines Punkts sind.

Wir werden verwenden radial-gradient() dafür:

.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 */
}

Da ist etwas doppelter Code drin, also lass uns eine CSS-Variable erstellen, um die Dinge zu verschlanken:

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

Cool Cool. Aber jetzt brauchen wir eine neue Animation, die hilft, die Punkte zwischen den animierten Farbverläufen nach oben und unten 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. Notiere dass der X Die Koordinate jedes Punktes ist festgelegt. Das mask-position ist so definiert, dass der erste Punkt links ist (0%), der zweite in der Mitte (50%) und der dritte rechts (100%). Wir aktualisieren nur die Y ab koordinieren 0% zu 100% um die Punkte tanzen zu lassen.

Hier ist, was wir bekommen:

Kombinieren Sie dies jetzt mit unserer Verlaufsanimation und die Magie beginnt zu geschehen:

Dotloader-Variationen

Die CSS-Variable, die wir im letzten Beispiel erstellt haben, macht es viel einfacher, neue Farben auszutauschen und mehr Variationen desselben Loaders zu erstellen. Zum Beispiel verschiedene Farben und Größen:

Was ist 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 derselben Codestruktur!

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. Dazu habe ich einen ausführlichen Artikel geschrieben. Sie werden sehen, dass wir aus derselben Codestruktur verschiedene Variationen erstellen können, indem wir einfach ein paar Werte ändern. Ich teile ein paar Beispiele am Ende des Artikels.

Warum kein Loader mit einem Punkt?

Dieser sollte ziemlich einfach zu groken sein, da ich dieselbe Technik verwende, aber mit einer einfacheren Logik:

Hier ist ein weiteres Beispiel für einen Loader, den ich auch animiere radial-gradient kombiniert mit CSS-Filter und mix-blend-mode So erzeugen Sie einen Blobby-Effekt:

Wenn Sie den Code überprüfen, werden Sie sehen, dass alles, was ich dort wirklich tue, darin besteht, die zu animieren background-position, genau wie beim vorherigen Loader, aber mit einem Schuss von background-size um es so aussehen zu lassen, als würde der Klecks größer, wenn er Punkte absorbiert.

Wenn Sie die Magie hinter diesem Blob-Effekt verstehen möchten, können Sie sich auf beziehen diese interaktiven Folien (nur Chrome) von Ana Tudor weil sie das Thema so gut behandelt!

Hier ist eine weitere Dotloader-Idee, diesmal mit einer anderen Technik:

Dies sind nur 10 CSS-Deklarationen und ein Keyframe. Das Hauptelement und seine zwei Pseudoelemente haben die gleiche Hintergrundkonfiguration mit einem radialen Farbverlauf. Jeder erstellt einen Punkt, also insgesamt drei. Die Animation bewegt den Farbverlauf von oben nach unten, indem für jeden Punkt unterschiedliche Verzögerungen verwendet werden.

Oh, und beachten Sie, wie diese Demo CSS Grid verwendet. Dadurch können wir die Standardeinstellung des Grids nutzen stretch Ausrichtung so, dass beide Pseudo-Elemente den gesamten Bereich ihres Elternteils abdecken. Keine Notwendigkeit für die Dimensionierung! Schieben Sie das um ein wenig mit translate() und wir sind fertig.

Mehr Beispiele!

Nur um den Punkt deutlich zu machen, möchte ich Ihnen ein paar zusätzliche Beispiele hinterlassen, die wirklich Variationen dessen sind, was wir uns angesehen haben. Wenn Sie sich die Demos ansehen, werden Sie sehen, dass die Ansätze, die wir hier behandelt haben, super flexibel sind und unzählige Gestaltungsmöglichkeiten eröffnen.

Next Up…

OK, also haben wir in diesem Artikel Punktlader und im letzten Artikel Spinner behandelt. Im nächsten Artikel dieser vierteiligen Serie widmen wir uns einem anderen gängigen Ladertyp: die Bars. Wir nehmen viel von dem, was wir bisher gelernt haben, und sehen, wie wir es erweitern können, um einen weiteren Einzelelement-Loader mit so wenig Code und so viel Flexibilität wie möglich zu erstellen.

---

Einzelelementlader: Die Punkte 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-dots/