Zuerst werden wir Folgendes bauen. Stellen Sie Ihren Timer ein!
Kommt Ihnen das bekannt vor?
Wenn ja, dann weil Sie das irgendwo gesehen haben - Slack!
Lassen Sie uns ein paar Dinge lernen, indem wir dies mit nur CSS und etwas gutem alten HTML neu erstellen.
Wenn Sie gerne Code schreiben, rufen Sie Codepen auf und erstellen Sie einen neuen Stift.
Jetzt aber los!
1. Das Markup
Das dafür erforderliche Markup ist recht einfach. Hier ist es:
For new sidebar colors, click your workspace name, then Preferences > Sidebar > Theme - Your friends at Slack; Einfach, oder?
Wenn Sie nicht sicher sind, warum die Klassennamen seltsame Striche haben, habe ich den Grund dafür in diesem Artikel erläutert.
Es gibt eine Menge Text und eine .loading__animZeitspanne, um sich als animiertes Symbol auszugeben.
Das Ergebnis ist die einfache Ansicht unten.
2. Zentrieren Sie den Inhalt
Das Ergebnis ist nicht das schönste, was es zu sehen gibt. Lassen Sie uns das gesamte .loadingAbschnittselement auf der Seite eingeben.
body { display: flex; justify-content: center; align-items: center; min-height: 100vh;}
Sieht besser aus?
3. Gestalten Sie den Ladetext
Ich kenne. Wir werden bald zu den animierten Sachen kommen. Lassen Sie uns den .loadingText zunächst so gestalten, dass er viel besser aussieht.
.loading { max-width: 50%; line-height: 1.4; font-size: 1.2rem; font-weight: bold; text-align: center;}
4. Gestalten Sie den Autorentext so, dass er etwas anders aussieht.
.loading__author { font-weight: normal; font-size: 0.9rem; color: rgba(189,189,189 ,1); margin: 0.6rem 0 2rem 0; display: block;}Los geht's!
5. Erstellen Sie den animierten Loader
Der mit Spannung erwartete Schritt ist hier. Dies wird der längste der Schritte sein, da ich einige Zeit damit verbringen werde, sicherzustellen, dass Sie verstehen, wie es funktioniert.
Wenn Sie nicht weiterkommen, schreiben Sie einen Kommentar und ich helfe Ihnen gerne weiter.
Hey, schau dir den Lader nochmal an.
Sie werden feststellen, dass die Hälfte des Strichs blau und die andere Hälfte grau ist. Okay, das ist geklärt. Außerdem werden HTMLElemente standardmäßig nicht gerundet. Alles ist ein Boxelement . Die erste echte Herausforderung wird darin bestehen, dem .loading__animElement halbe Grenzen zu geben .
Mach dir keine Sorgen, wenn du das noch nicht verstehst. Ich werde darauf zurückkommen.
Lassen Sie uns zunächst die Abmessungen des Laders sortieren.
.loading__anim { width: 35px; height: 35px; }Im Moment befindet sich der Lader in derselben Zeile wie der Text. Das liegt daran, dass es sich um ein spanElement handelt, das zufällig ein HTMLInline- Element ist.
Stellen wir sicher, dass der Lader in einer anderen Zeile sitzt, dh in einer anderen Zeile beginnt, im Gegensatz zum Standardverhalten von inlineElementen.
.loading__anim { width: 35px; height: 35px; display: inline-block; }Stellen wir abschließend sicher, dass für den Lader ein Rahmen festgelegt ist.
.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); }Dies gibt einen grauen5px Rand um das Element.
Hier ist das Ergebnis davon.
Noch nicht so toll. Machen wir das noch besser.
Ein Element hat vier Seiten, top, bottom, left, undright
Die zuvor festgelegte borderDeklaration wurde auf alle Seiten des Elements angewendet.
To create the loader, we need two sides of the element to have different colors.
It doesn’t matter what sides you choose. I have used the top and left sides below
.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); border-left-color: rgba(3,155,229 ,1); border-top-color: rgba(3,155,229 ,1); }Now, the left and top sides will have a blueish color for their borders. Here’s the result of that:
We’re getting somewhere!
The loader is round, NOT rectangular. Let’s change this by giving the .loader__anim element a border-radius of 50%
Now we have this:
Not so bad, huh?
The final step is to animate this.
@keyframes rotate { to { transform: rotate(1turn) }}Hopefully, you have an idea of how CSS animations work. 1turn is equal to 360deg , that is a complete turn rotates 360 degrees.
And apply it like this:
animation: rotate 600ms infinite linear;Yo! We did it. Does that all make sense?
By the way, see the result below:
Pretty cool, huh?
If any of the steps confused you, drop a comment and I’ll be happy to help.
Ready to become Pro?
I have created a free CSS guide to get your CSS skills blazing, immediately. Get the free ebook.
