Wie erstelle ich einen animierten Ladering mit HTML und CSS?

Übersicht

Ein Loader ist eine Webkomponente, die von fast allen Webanwendungen verwendet wird. Um den Loader-Ring zu erstellen, sollten wir über einige Vorkenntnisse über Cascading Style Sheets (CSS) verfügen, da CSS den Stil- und Animationsteil des Loader-Rings umfasst. Da die Loader-Komponente geladen wird, bevor der ursprüngliche Inhalt in die Webseite geladen wird. Die wichtigsten Stileigenschaften, die zum Erstellen dieser Funktion verwendet werden, sind Animationen, Übergänge und Keyframes. Diese drei CSS-Eigenschaften verwandeln eine einfache statische animierte Ladeschleife in eine animierte Ladeschleife.

Algorithmus

Schritt 1 – Erstellen Sie eine HTML-Datei im Ordner und öffnen Sie sie mit einem Texteditor. Fügen Sie HTML-Boilerplate zu HTML-Dateien hinzu.

Schritt 2 − Erstellen Sie einen übergeordneten HTML-Div-Container im Body-Tag des HTML-Dokuments mit dem Klassennamen „loading“.

<div class="loading"></div>

Schritt 3 −Erstellen Sie einen untergeordneten Div-Container, der der Haupt-Loader-Ring mit dem Klassennamen „Loader“ ist.

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

Schritt 4−Erstellen Sie ein p-Tag mit dem Text „Loading“.

<p>Loading ....</p>

Schritt 5 − Erstellen Sie nun eine style.css-Datei und verknüpfen Sie die Datei mit dem HTML-Dokument.

<link rel="stylesheet" href="style.css">

Schritt 6 − Gestalten Sie nun das HTML-Element und lassen Sie den Loader auf der Webseite klingeln.

body {
   margin: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

p {
   font-family: 'Segoe UI';
}

Schritt 7 − Zielen Sie auf die Loader-Klasse und erstellen Sie mithilfe des Randradius einen Rand, um eine ringrahmenähnliche Struktur zu erstellen.

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
}

Schritt 8 − Fügen Sie das Animationsattribut zum Loader-Element hinzu, mit dem Animationsnamen „lring“ und einschließlich der Animationsdauer und Anzahl der Iterationen.

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
   animation: lring 1s linear infinite;
}

Schritt 9 − Erstellen Sie nun Keyframe-Eigenschaften, positionieren Sie die obige Animation und stellen Sie die Animation auf das Element ein.

@keyframes lring {
   0% {
      transform: rotate(0deg);
   }
   
   100% {
      transform: rotate(360deg);
   }
}

Schritt 10 − Der animierte Ladering wurde erfolgreich erstellt.

Beispiel

In diesem Beispiel erstellen wir eine animierte Ladeschleifen-Funktionskomponente unter Verwendung einfacher HTML- und CSS-Animationseigenschaften. Um dies zu erreichen, haben wir zwei Dateien erstellt: Die erste Datei ist index.html, die das Layout oder den Rahmen des Loader-Rings darstellt, und die andere Datei ist die Datei style.css, die den Stil und die Funktionsweise des Loader-Rings darstellt.

   
   <link rel="stylesheet" href="style.css">
   


   

      <div class="loader"></div>
      <p>Loading ....</p>
   

Fazit

Die oben genannten Funktionen sind für alle Web- oder Mobilanwendungen verfügbar. Da es sich bei dem, was oben erstellt wird, nur um eine Komponente handelt, können wir diese funktionale Komponente in eine Live-Arbeitsanwendung einbetten, indem wir die API verwenden, um Daten oder lokale Daten abzurufen. Wenn die Netzwerkdaten also noch nicht auf unsere Webseite geladen sind, können wir den Ladevorgang anzeigen Animation auf dem Bildschirm Schleife Sobald die Daten geladen sind, ersetzen wir die Ladeschleife durch den Website-Inhalt. Wir können auch animierte Ladungen in verschiedenen Designs erstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen animierten Ladering mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!