Először is, itt fogjuk megépíteni. Állítsa be az időzítőt!
Ez ismerősnek tűnik?
Ha igen, ez azért van, mert látta ezt valahol - Laza!
Tanuljunk meg néhány dolgot úgy, hogy ezt csak CSS-sel és néhány jó ol 'HTML-lel készítjük el.
Ha izgatottan akar valamilyen kódot írni, lépjen be a Codepen programba, és hozzon létre egy új tollat.
Most menjünk!
1. A jelölés
Az ehhez szükséges jelölés meglehetősen egyszerű. Itt van:
For new sidebar colors, click your workspace name, then Preferences > Sidebar > Theme - Your friends at Slack; Egyszerű, mi?
Ha nem tudja biztosan, hogy miért vannak furcsa kötőjelek az osztályneveknek, ebben a cikkben kifejtettem ennek okait.
Van egy csomó szöveg, és egy .loading__animátfedés az animált ikon „megszemélyesítésének”.
Ennek eredménye az alábbi egyszerű nézet.
2. Középre helyezze a Tartalmat
Az eredmény nem a legcsinosabb. Legyen a teljes .loadingszakaszelem beírva az oldalra.
body { display: flex; justify-content: center; align-items: center; min-height: 100vh;}
Jobban néz ki?
3. Stílusolja a Betöltés szöveget
Tudom. Hamarosan eljutunk az animációs dolgokhoz. Most egyformázzuk a .loadingszöveget úgy, hogy sokkal jobban nézzen ki.
.loading { max-width: 50%; line-height: 1.4; font-size: 1.2rem; font-weight: bold; text-align: center;}
4. Stílusolja a szerző szövegét kissé másra.
.loading__author { font-weight: normal; font-size: 0.9rem; color: rgba(189,189,189 ,1); margin: 0.6rem 0 2rem 0; display: block;}Nesze!
5. Készítse el az animált betöltőt
Itt van a várva várt lépés. Ez lesz a leghosszabb lépés, mert egy kis időt szánok arra, hogy megértsem, hogyan működik.
Ha elakad, dobjon egy megjegyzést, és szívesen segítek.
Hé, nézze meg újra a rakodót.
Észre fogja venni, hogy löketének fele kék, másik fele szürke. Oké, ez rendezett. Az HTMLelemek alapértelmezés szerint nincsenek kerekítve. Minden egy doboz elem. Az első igazi kihívás az lesz, hogy miként adhatunk félelemeket az .loading__animelemnek.
Ne aggódj, ha ezt még nem érted. Visszatérek hozzá.
Először rendezzük ki a rakodó méreteit.
.loading__anim { width: 35px; height: 35px; }Jelenleg a betöltő ugyanazon a soron van, mint a szöveg. Ez azért van, mert ez egy spanelem, amely véletlenül HTMLinline elem.
Ügyeljünk arra, hogy a rakodó egy másik vonalon üljön, vagyis egy másik vonalon kezdődik, szemben az inlineelemek alapértelmezett viselkedésével .
.loading__anim { width: 35px; height: 35px; display: inline-block; }Végül győződjünk meg arról, hogy a betöltőben van beállítva határ.
.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); }Ez szürkés5px határt kap az elem körül.
Itt van ennek az eredménye.
Nem olyan nagyszerű - még. Tegyük ezt még jobbá.
Egy elem négy oldala, top, bottom, left, ésright
A borderkorábban megadott deklarációt az elem minden oldalára alkalmaztuk.
A betöltő létrehozásához szükségünk van az elem két oldalára, hogy különböző színek legyenek.
Nem mindegy, hogy melyik oldalt választja. Az alábbiakat topés leftoldalakat használtam
.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); }Most a leftés az topoldalak kékes színűek lesznek a határoknál. Ennek az eredménye:
Valahová érünk!
A rakodó kerek, NEM téglalap alakú. Változtassuk meg ezt azáltal, hogy az .loader__animelem egy border-radiusa50%
Most megvan ez:
Nem is olyan rossz, mi?
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.
