So erstellen Sie einen stilvollen Loader für Ihre Website

Einführung

Ein Loader (oder Loading Spinner) verbessert das Benutzererlebnis, indem er während der Ladezeiten visuelles Feedback gibt. In diesem Tutorial erstellen wir einen eleganten und modernen Loader mit HTML und CSS. Lasst uns eintauchen!

Was ist ein Lader?

Ein Loader ist ein animiertes Element, das anzeigt, dass Inhalte verarbeitet werden. Es stellt sicher, dass die Anwendung funktioniert, und verringert das Risiko von Frustrationen während der Ladezeiten.

Warum einen Lader verwenden?

• Verbessert die Benutzererfahrung: Es hält Benutzer während des Wartens auf dem Laufenden.
• Verbessert die Ästhetik: Ein gut gestalteter Loader kann Ihre Website professioneller aussehen lassen.
• Verhindert, dass Benutzer den Dienst verlassen: Durch visuelles Feedback ist es weniger wahrscheinlich, dass Benutzer während des Wartens gehen.

Schritt 1: Einrichten der HTML-Struktur
Wir beginnen mit der grundlegenden HTML-Struktur für unseren Loader. Der folgende Code erstellt einen Container für den Loader mit zwölf Bars.

Schritt 2: Styling mit CSS
Als Nächstes fügen wir CSS hinzu, um den Loader zu formatieren. Hier ist der Code zum Erstellen eines kreisförmigen Laders mit animierten Balken.

`.loader {
Position: relativ;
Breite: 54px;
Höhe: 54px;
Randradius: 10px;
}

.loader div {
Breite: 8 %;
Höhe: 24 %;
Hintergrund: rgb(128, 128, 128);
Position: absolut;
übrig: 50 %;
oben: 30 %;
Deckkraft: 0;
Randradius: 50px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
Animation: fade458 1s linear unendlich;
}

@keyframes fade458 {
von {
Deckkraft: 1;
}

bis {
Deckkraft: 0,25;
}
}`

Schritt 3: Animation hinzufügen
Wir wenden Rotations- und Animationsverzögerungen auf jeden Balken an, um einen dynamischen Ladeeffekt zu erzeugen.

`.loader .bar1 {
transformieren: rotieren(0deg) übersetzen(0, -130%);
Animationsverzögerung: 0s;
}

.loader .bar2 {
transformieren: rotieren (30 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -1,1 s;
}

.loader .bar3 {
transformieren: rotieren (60 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -1s;
}

.loader .bar4 {
transformieren: rotieren (90 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -0,9 s;
}

.loader .bar5 {
transformieren: rotieren (120 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -0,8 s;
}

.loader .bar6 {
transformieren: rotieren (150 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -0,7 s;
}

.loader .bar7 {
transformieren: rotieren (180 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -0,6 s;
}

.loader .bar8 {
transformieren: rotieren (210 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -0,5 s;
}

.loader .bar9 {
transformieren: rotieren (240 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -0,4 s;
}

.loader .bar10 {
transformieren: rotieren (270 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -0,3 s;
}

.loader .bar11 {
transformieren: rotieren (300 Grad) übersetzen (0, -130 %);
Animationsverzögerung: -0,2 s;
}

.loader .bar12 {
transformieren: rotieren(330 Grad) übersetzen(0, -130 %);
Animationsverzögerung: -0,1 s;
}`

Schritt 4: Integration des Loaders in Ihre Website
Um den Loader in Ihrem Webprojekt zu verwenden, stellen Sie sicher, dass Sie HTML und CSS in Ihre Dateien einbinden. Platzieren Sie das HTML-Markup des Loaders an der gewünschten Stelle und der Loader wird während des Ladevorgangs angezeigt.

Abschluss

Das Erstellen eines Loaders kann das Benutzererlebnis Ihrer Website erheblich verbessern. Mit einfachem HTML und CSS können Sie einen optisch ansprechenden und funktionalen Loader erstellen. Experimentieren Sie mit Farben und Größen, um sie an das Design Ihrer Website anzupassen!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen stilvollen Loader für Ihre Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!