So erstellen Sie einen Lader mit CSS

Bei Verwendung einer Anwendung müssen Sie manchmal warten, um den Inhalt anzuzeigen, bis er geladen wird. Zu diesem Zweck lassen die Lader in Websites oder Anwendungen den Benutzer beim Anzeigen einer Animation warten. Auf einer Website geben diese Lader an, dass das System nicht abgestürzt ist und der Inhalt nach einer Weile angezeigt wird. Darüber hinaus bieten die Animationslader ein attraktives Erscheinungsbild, der die Aufmerksamkeit des Benutzers auf der Website hilft.

Dieser Artikel enthält Anweisungen zum Erstellen eines Laders mit CSS.

So erstellen Sie Lader mit CSS?

Fügen Sie zum Zwecke des Erstellens eines Laders zunächst in HTML ein Div -Element mit dem Klassennamen hinzu “Lader”. Platzieren Sie in diesem Element ein anderes DIV -Element mit dem Klassennamen “Laderinter”.

Html

Gehen Sie nun zum CSS -Abschnitt über, wo diese Elemente so gestaltet sind.

CSS

Das Styling, das wir bewerben werden, wird unten erwähnt.

Stil alle Elemente

*
Rand: 0;
Polsterung: 0;
Kastengrößen: Border-Box;
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;

Die Erläuterung des oben genannten Codes ist unten aufgeführt:

• “*Das Sternchensymbol wird verwendet, um alle Arten von Elementen darzustellen, auf die diese Eigenschaften angewendet werden.
• “RandEigenschaften werden verwendet, um Platz um ein Element zu geben. Der Wert "0”Bedeutet, dass jedes HTML -Element keinen Rand gibt.
• “PolsterungEigenschaft gibt den Raum um den Inhalt des Elements an.
• “Kastengrößen”Eigenschaft mit dem Wert“GrenzschachtelGeben Sie an, dass Grenze und Polsterung in Höhe und Breite enthalten sind.
• “Schriftfamilie”Definiert die Schrift des Elements.

Stil „Körper“ Element

Körper
Höhe: 100VH;
Hintergrundfarbe: RGB (53, 53, 53);

Die auf das Körperelement angewendeten Eigenschaften sind nachstehend angegeben:

• “HöheEigenschaft wird verwendet, um die Höhe des Körpers festzulegen. Die Einheit "VH”Repräsentiert, dass das Körperelement zunächst 100% der Ansichtsfensterhöhe nimmt.
• “HintergrundfarbeEigenschaft legt die Hintergrundfarbe des Körpers fest.

Stil „Loader“ div

.Loader
Position: absolut;
Top: 50%;
Links: 50%;
Animation: Ladespinner 400 ms linear unendlich;

Die Beschreibung der Eigenschaften, die auf den Lader Div von HTML angewendet werden, ist unten angegeben:

• “Position”Eigenschaft mit dem Wert“absolut”Wird das Laderelement relativ zu seinen Eltern platzieren.
• “SpitzeEigenschaft legt die vertikale Position des Divs fest.
• “linksEigenschaft legt die horizontale Position des Divs fest.
• “AnimationIst eine Kurzeigeneigenschaft, die den Animationsnamen, die Animationsdauer, die Animations -Timing -Funktion und die Animationsverzögerung für den Loader festlegt.

Notiz: Der "Ladespinner”Ist der Animationsname, der in der Animation @KeyFrames verwendet wird, um die Animation anzugeben.

Stil „Loader-Inner“ Div

.Lader .Loader-Inner
Breite: 60px;
Höhe: 60px;
Grenze: 10px fest transparent;
Border-Top-Color: #00C8B1;
Border-Links-Farben: #00C8B1;
Grenzradius: 50%;

Das Kinderviv des Lader -Divs, der den Namen hat “Laderinter”Wird mit Eigenschaften angewendet, die nachstehend beschrieben werden:

• “BreiteEigenschaft legt die Breite des Elements fest.
• “HöheEigenschaft legt die Höhe des Elements fest.
• “GrenzeGibt einen Rand mit Breite, Art der Linie und Farbe an.
• “Grenztop-Farben”Fügt Farbe an die Oberseite des Randes hinzu.
• “Grenz-links-Farben”Fügt links vom Grenze Farbe hinzu.
• “GrenzradiusGibt den Radius der Grenze an und macht es rund ums.

Der Loader wird erfolgreich erstellt und wird so aussehen:

Setzen wir die Animationsschlüsselframes des oben erstellten Laders ein.

Setzen Sie Animationsschlüsselframes

@keyframes ladenspinner
0%
Transformation: Drehen (0DEG);

100%
Transformation: Drehen (360 Grad);

Die Keyframes in CSS definieren die Animation, indem sie ihren Stil auf unterschiedliche Dauer festlegen:

• “@keyframes ladenspinner": Der Animationsname"Ladespinner”, Gefolgt von dem Keyword @KeyFrames, wird verwendet, um die Animation festzulegen.
• “0%"Repräsentiert die Animation am Start, in dem der Lader gedreht wird"0" Grad.
• “100%"Repräsentiert die Animation am Ende, während der Lader bei" rotiert wird "360Grad.

Notiz: Der Animationsname ist im Loader-Inner Div angegeben.

Ausgang

Cool! Wir haben erfolgreich einen animierten Loader mit CSS erstellt.

Abschluss

Auf Websites, Lader bei hinzugefügt, um die Aufmerksamkeit des Benutzers zu erlangen, bis der Inhalt geladen wird. Es werden mehrere CSS -Eigenschaften verwendet, um Lader herzustellen, wie zAnimation”Und Einstellen der Animationsschlüsselrahmen mit der“verwandeln" Eigentum. In diesem Artikel ging es darum, einen CSS-Loader zu erstellen und Animation darauf anzuwenden.