Einführung

Ein Loader (oder Loading Spinner) verbessert das Benutzererlebnis, indem er während der Ladezeiten visuelles Feedback liefert. In diesem Tutorial erstellen wir einen eleganten und modernen Loader mit HTML und CSS. Lass 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 das Unternehmen verlassen: Durch die Bereitstellung von visuellem Feedback ist es weniger wahrscheinlich, dass Benutzer das Unternehmen während des Wartens verlassen.

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;
links: 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 {
aus {
Deckkraft: 1;
}

Zu {
Deckkraft: 0,25;
}
}`

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

`.loader .bar1 {
transformieren: rotieren(0 Grad) ü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!