Einzelelementlader: der Spinner

Das Erstellen von CSS-Lader ist eine lohnende Herausforderung. Die hypnotisierenden unendlichen Animationen sind immer befriedigend zu erstellen. Codepen zeigt eine Vielzahl von Techniken, aber dieser Artikel konzentriert sich auf die Erreichung eines Einzelelementladers mit minimalem Code.

Ich habe über 500 div entwickelt, und diese vierteilige Serie teilt die verwendeten Techniken. Wir werden zahlreiche Beispiele untersuchen und zeigen, wie subtile Anpassungen unterschiedliche Ergebnisse erzielen und wie prägnant der Code sein kann.

Einzelelementladerserien:

1. Einzelelementlader: Der Spinner - Sie sind hier
2. Einzelelementlader: die Punkte
3. Einzelelementlader: die Balken
4. Einzelelementlader: 3D gehen

Dieser erste Artikel erstellt ein gemeinsames Ladermuster: Spinnbalken.

Der Ansatz

Ein einfacher Ansatz verwendet mehrere Elemente (in diesem Fall neun), die jeweils eine Balken innerhalb eines Elternteils darstellen. Deckkraft und Transformationen erzeugen den Spinneffekt.

Meine Methode verwendet jedoch nur ein Element:

<div></div>

... und 10 CSS -Erklärungen:

 .loader {
  Breite: 150px; / * steuern die Größe */
  Aspektverhältnis: 1;
  Anzeige: Grid;
  Maske: Conic-Gradient (ab 22 Grad, #0003, #000);
  Animation: 1S -Schritte (8) unendlich laden;
}
.loader,
.loader: vor {
  --_ G: Linear-Gradient (#17177c 0 0) 50%; / * Aktualisieren Sie die Farbe hier *////
  Hintergrund: 
    var (--_ g)/34% 8% Space No-Repeat,
    var (--_ g)/8% 34% No-Repeat Space;
}
.loader: vor {
  Inhalt: "";
  Transformation: Drehen (45 Grad);
}
@keyframes laden {
  zu {transformieren: rotieren (1 Turn); }
}

Code -Aufschlüsselung

Der Code mag zunächst ungewöhnlich erscheinen, aber er ist einfacher als er scheint. Zunächst definieren wir die Abmessungen des Elements - ein 150px -Quadrat. aspect-ratio stellt sicher, dass es unabhängig von der Größenänderung quadratisch bleibt.

 .loader {
  Breite: 150px; / * steuern die Größe */
  Aspektverhältnis: 1; / * quadratische Form halten */
}

Bei CSS -Ladern ist ein einzelner Größensteuerwert ideal. Hier ist es die Breite; Alle Berechnungen sind relativ dazu. Dies ermöglicht einfache Größenanpassungen.

Gradienten erstellen die Balken. Dies ist der komplizierteste Teil. Ein einzelner Gradient erzeugt zwei Balken:

 Hintergrund: Linear-Gradient (#17177c 0 0) 50%/34% 8% Space No-Repeat;

Der Gradient verwendet eine Farbe und zwei Farbstopps, was zu einer festen Farbe führt. Die Größe ist 34% breit und 8% hoch, zentriert (50%). Das space -Schlüsselwort dupliziert den Gradienten und erstellt zwei Balken.

Aus der Spezifikation:

Das Bild wird so oft wiederholt wie in den Hintergrund -Positionierungsbereich, ohne abgeschnitten zu werden, und dann sind die Bilder ausgerichtet, um den Bereich zu füllen. Die ersten und letzten Bilder berühren die Ränder des Bereichs.

Eine Breite von 34% ermöglicht nur zwei Balken (3 34%> 100%), wobei Lücken (100% - 2 34% = 32%) hinterlassen . space positioniert diese Lücken zentral. Eine Breite zwischen 33% und 50% sorgt für mindestens zwei Balken mit Abstand.

Wir erstellen zwei weitere Balken mit einem zweiten Gradienten, was dazu führt:

 Hintergrund: 
 Lineargradient (#17177c 0 0) 50%/34% 8% Space No-Repeat,
 Lineargradient (#17177c 0 0) 50%/8% 34% No-Repeat-Raum;

Eine CSS -Variable optimiert dies:

 --_ G: Linear-Gradient (#17177c 0 0) 50%; / * Aktualisieren Sie die Farbe hier *////
Hintergrund: 
 var (--_ g)/34% 8% Space No-Repeat,
 var (--_ g)/8% 34% No-Repeat Space;

Dies ergibt vier Balken. Die CSS -Variable vereinfacht Farbaktualisierungen.

Das .loader -Element und sein ::before Pseudoelement erzeugen vier weitere Balken mit insgesamt acht.

 .loader {
  Breite: 150px; / * steuern die Größe */
  Aspektverhältnis: 1;
  Anzeige: Grid;
}
.loader,
.loader :: vor {
  --_ G: Linear-Gradient (#17177c 0 0) 50%; / * Aktualisieren Sie die Farbe hier *////
  Hintergrund: 
    var (--_ g)/34% 8% Space No-Repeat,
    var (--_ g)/8% 34% No-Repeat Space;
}
.loader :: vor {
  Inhalt: "";
  Transformation: Drehen (45 Grad);
}

display: grid stellt sicher, dass das Pseudo-Element den Bereich des Elternteils abdeckt und die Notwendigkeit explizite Dimensionen beseitigt.

Drehen Sie die Pseudo-Elemente um 45-° -Spositionen die verbleibenden Balken.

Opazitätskontrolle

Der Effekt eines einzelnen Balkens, der einen verblassenden Pfad verlässt, wird mit einer CSS- mask mit einem conic-gradient erreicht:

 Maske: Conic-Gradient (ab 22 Grad,#0003,#000);

Dieser Gradient erhöht allmählich die Transparenz im Uhrzeigersinn. Auf den Lader wird die verblassende Balken -Illusion erzeugt. Jede Balken scheint aufgrund der Maskierung zu verblassen und den Eindruck unterschiedlicher Opazität zu erzeugen.

Rotationsanimation

Eine Stufenanimation unter Verwendung steps(8) (wobei 8 die Anzahl der Balken ist) erstellt die Rotation:

 .loader {
  Animation: 3S -Schritte laden (8) unendlich;
}

@keyframes laden {
  zu {Transformation: Drehen (1 Turn)}}
}

Dadurch wird der Lader mit einem minimalen CSS-Lader ausgelöst. Größe und Farbe können leicht gesteuert werden. Das Hinzufügen von A ::after dem Pseudoelement könnte sich auf zwölf Balken mit geringfügigen Codeanpassungen erweitern. Alternative Implementierungen sind ebenfalls möglich, indem sie unterschiedliche Gradienten- und Opazitätstechniken verwenden.

Alternative Formen: Punkte

Das Erstellen eines dot-basierten Laders ist ähnlich und unter Verwendung von Radialgradienten anstelle von linearen. Das Kernkonzept der Maskierung der Opazität bleibt gleich, aber die Formen sind Kreise. Die Safari -Kompatibilität kann Gradientenanpassungen erfordern.

Weitere Beispiele

Es werden mehrere zusätzliche Spinnerlader gezeigt, wobei verschiedene Techniken (Gradienten, Masken, Pseudoelemente) verwendet werden. Diese dienen als Übungen beim Verständnis verschiedener Ansätze.

Abschluss

With a single div , gradients, pseudo-elements, and variables, a variety of spinning loaders can be created. Die Beispiele sind grundsätzlich ähnlich, mit geringfügigen Modifikationen. Dies ist nur der Anfang; In der Serie werden fortschrittlichere CSS -Lader -Techniken untersucht.

Einzelelementladerserien:

1. Einzelelementlader: Der Spinner - Sie sind hier
2. Einzelelementlader: die Punkte
3. Einzelelementlader: die Balken
4. Einzelelementlader: 3D gehen

Das obige ist der detaillierte Inhalt vonEinzelelementlader: der Spinner. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!