Wie man erstellt: CSS Lader

Lernen Sie, wie Sie einen Vorelader mit CSS erstellen.

Selbst ausprobieren

Wie man einen Lader erstellt

Schritt 1 - Fügen Sie HTML hinzu:

<div class="loader"></div>

Schritt 2 - Fügen Sie CSS hinzu:

.loader {
  border: 16px solid #f3f3f3; /* hellgrau */
  border-top: 16px solid #3498db; /* blau */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Selbst ausprobieren

Beispiel explanation:

border Eigenschaft spezifiziert die Größe und Farbe des Rahmens des Laders.border-radius Eigenschaft den Lader in einen Kreisformigkeitsmodus umwandelt.

der im Rahmen rotierenden blauen Teil wird durch border-top Eigenschaften spezifiziert. Wenn Sie mehr "Drehkreise" haben möchten, können Sie auch border-bottom,border-left und/oder border-rightsiehe untenstehendes Beispiel).

Die Größe des Laders wird durch width und height Eigenschaft spezifiziert.

Schließlich haben wir eine Animation hinzugefügt, die den blauen Teil mit einer Geschwindigkeit von 2 Sekunden endlos dreht.

Hinweis:für die nicht unterstützen animation und transform Browser für die Eigenschaft, sollten Sie auch eine -webkit- Präfix. Klicken Sie auf das Beispiel, um zu sehen, wie Sie vorgehen.

füge mehr Drehkreise hinzu

Beispiel

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

Selbst ausprobieren

Beispiel

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

Selbst ausprobieren

Beispiel

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

Selbst ausprobieren

Ein weiteres Beispiel

Wie man den Ladebildschirm in der Mitte der Seite platziert und "Seiteninhalt" anzeigt, wenn der Ladevorgang abgeschlossen ist：

Beispiel

Selbst ausprobieren