CSS - Ladebalken: Ein Anfängerleitfaden zur Erstellung dynamischer Ladeanimationen

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die faszinierende Welt der CSS-Ladebalken. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, dich auf dieser Reise zu führen. Mach dir keine Sorgen, wenn du noch nie eine Zeile Code geschrieben hast – wir beginnen bei den ganz Basics und arbeiten uns hoch. Am Ende dieses Tutorials wirst du atemberaubende Ladeanimationen erstellen können, die deine Websites professionell und ansprechend aussehen lassen. Also, los geht's!

Was sind CSS-Ladebalken?

Bevor wir uns dem Code widmen, lassen wir uns erst einmal anschauen, was CSS-Ladebalken sind und warum sie wichtig sind. Hast du jemals eine Website besucht und eine drehende Schleife oder einen hüpfenden Punkt gesehen, während du auf den Ladeinhalt wartest? Das ist ein Ladebalken! Diese Animationen geben den Benutzern visuelles Feedback, lassen sie wissen, dass im Hintergrund etwas passiert. Es ist, als würde man seinen Besuchern sagen: "Gestatten Sie einen kurzen Moment, wir bereiten alles für Sie vor!"

Erstellung deines ersten Ladebalkens

Nun, lasst uns die Ärmel hochkrempeln und unseren ersten Ladebalken erstellen. Wir beginnen mit etwas Einfachem und steigern die Komplexität.allmählich.

CSS-Ladebalken - Grundlegendes Beispiel

Hier ist ein grundlegender Ladebalken, der eine drehende Schleife erstellt:

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

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

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

Lassen wir das auseinandernehmen:

1. Wir erstellen ein <div>-Element mit der Klasse "loader".
2. In unserem CSS stylen wir dieses Div zu einem Kreis mit border-radius: 50%.
3. Wir geben ihm eine helle graue Umrandung (#f3f3f3) auf allen Seiten, außer oben, wo sie blau (#3498db) ist.
4. Die Eigenschaft animation stellt unsere Drehanimation ein:

• spin ist der Name unserer Animation.
• 2s bedeutet, die Animation dauert 2 Sekunden.
• linear bedeutet, die Animationsgeschwindigkeit ist konstant.
• infinite bedeutet, sie wiederholt sich endlos.

5. Die Regel @keyframes definiert, was während der Animation passiert. Wir drehen von 0 bis 360 Grad.

Und voilà! Du hast deinen ersten Ladebalken erstellt. Ist das nicht aufregend?

CSS-Ladebalken - Mit der border-right Eigenschaft

Nun probieren wir einen leicht anderen Ansatz. Wir erstellen einen Ladebalken, der wie ein "füllender" Zeiger im Uhrzeigersinn aussieht:

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

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
border-right: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

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

Der entscheidende Unterschied hier ist, dass wir border-right: 16px solid #3498db; hinzugefügt haben. Dies erstellt einen Ladebalken, der sich zu füllen scheint, während er sich dreht. Es ist, als würde man eine Uhrenhand beobachten, oder?

CSS-Ladebalken - Mit :before und :after

Nun ein Level höher, wir erstellen einen komplexeren Ladebalken mit den Pseudo-Elementen :before und :after. Dies gibt uns einen coolen "doppelten Ring"-Effekt:

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

.loader {
width: 120px;
height: 120px;
position: relative;
}

.loader:before, .loader:after {
content: "";
position: absolute;
border: 8px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}

.loader:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-color: #3498db;
}

.loader:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #e74c3c;
animation-delay: 0.5s;
}

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

Dieser Ladebalken erstellt zwei drehende Kreise:

1. Der äußere Kreis (:before) dreht sich mit einer blauen oberen Kante.
2. Der innere Kreis (:after) ist etwas kleiner, hat eine rote obere Kante und beginnt eine halbe Sekunde später zu drehen.

Das Ergebnis ist ein faszinierender doppelter Ring-Effekt. quite cool, oder?

CSS-Ladebalken - Mit linear-gradient

Für unseren letzten Trick erstellen wir einen Ladebalken mit linear-gradient. Dies gibt uns eine sanfte, kontinuierliche Farbverlaufsansicht:

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

.loader {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(to right, #3498db 50%, #f3f3f3 50%);
animation: spin 1s linear infinite;
}

.loader:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
margin: 10px;
position: relative;
z-index: 1;
}

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

Dieser Ladebalken verwendet einen cleveren Trick:

1. Wir erstellen einen Kreis mit einem Gradienten, der zur Hälfte blau und zur Hälfte grau ist.
2. Wir fügen dann einen weißen Kreis oben darauf hinzu, indem wir das :before-Pseudo-Element verwenden.
3. Wenn der äußere Kreis sich dreht, erzeugt er die Illusion einer sanften Ladeanimation.

Zusammenfassung der Ladebalkenmethoden

Hier ist eine kurze Referenztabelle der Methoden, die wir behandelt haben:

Methode	Beschreibung	Schlüssel-Eigenschaften
Grundlegendes Beispiel	Einfacher drehender Kreis	border, border-radius, animation
Border-right	Uhrzeigersinn füllender Effekt	border, border-right
:before und :after	Doppelring-Effekt	:before, :after, animation-delay
Linear-gradient	Sanfter Farbverlauf	linear-gradient, :before

Und das war's! Du hast gerade vier verschiedene Möglichkeiten zur Erstellung von CSS-Ladebalken gelernt. Denke daran, diese sind nur Ausgangspunkte – probiere ruhig Farben, Größen und Animationen aus, um deine eigenen einzigartigen Ladebalken zu erstellen.

Bevor wir aufhören, möchte ich eine kurze Geschichte teilen. Als ich zum ersten Mal CSS unterrichtete, hatte ich einen Schüler, der von Ladebalken frustriert war. Er sagte: "Warum die Mühe? Die Benutzer haben sowieso keine Lust zu warten!" Doch dann erstellte er seinen ersten benutzerdefinierten Ladebalken, und seine Augen leuchteten auf. Er erkannte, dass selbst eine kleine Wartezeit mit der richtigen Animation in ein delightful Erlebnis verwandelt werden kann. Das ist die Macht der CSS-Ladebalken – sie verwandeln Warten in Wundern.

Also, los geht's und erstellt! Experimentiert mit diesen Techniken, kombiniert sie und vor allem: Habt Spaß dabei. Denkt daran, in der Welt der Webentwicklung ist Kreativität dein bester Freund. Frohes Coden und bis zum nächsten Mal, lasst die Ladebalken drehen!

Credits: Image by storyset