Ładowarki jednoelementowe: Dots

Przyglądamy się ładowarkom z tej serii. Co więcej, rozbijamy niektóre popularne wzorce ładowaczy i jak je odtworzyć, używając tylko jednego div. Do tej pory rozbieraliśmy się klasyczny spinning loader. Teraz spójrzmy na inny, o którym prawdopodobnie dobrze wiesz: kropki.

Ładowarki kropkowe są wszędzie. Są zgrabne, ponieważ zwykle składają się z trzech kropek, które wyglądają jak wielokropek tekstu (…), który tańczy dookoła.

Naszym celem jest zrobienie tego samego z jednego elementu div. Innymi słowy, nie ma jednego div na kropkę ani indywidualnych animacji dla każdej kropki.

Powyższy przykład programu ładującego powyżej składa się z pojedynczego elementu div, kilku deklaracji CSS i żadnych pseudoelementów. Łączę dwie techniki za pomocą CSS background i mask. A kiedy skończymy, zobaczymy, jak animowanie gradientu tła pomaga stworzyć iluzję, w której każda kropka zmienia kolor, gdy poruszają się kolejno w górę iw dół.

Animacja w tle

Zacznijmy od animacji tła:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Mam nadzieję, że wygląda to całkiem prosto. To, co mamy, to 180px-szeroki .loader element, który pokazuje dwa stożkowe gradienty z twardymi przerwami między dwoma kolorami każdy — pierwszy gradient jest czerwony i niebieski wzdłuż górnej połowy .loader, a drugi gradient jest zielony i fioletowy wzdłuż dolnej połowy.

Sposób, w jaki rozmiar tła programu ładującego (200% szeroki), widzimy tylko jeden z tych kolorów w każdej połowie na raz. Następnie mamy tę małą animację, która przesuwa położenie tych gradientów tła w lewo, w prawo i z powrotem na zawsze.

W przypadku właściwości tła — zwłaszcza background-position — zawsze odnoszę się do mojego Odpowiedź Stack Overflow, w której podaję szczegółowe wyjaśnienie jak to wszystko działa. Jeśli nie czujesz się komfortowo ze sztuczkami CSS w tle, gorąco polecam przeczytanie tej odpowiedzi, aby pomóc w tym, co będzie dalej.

Zauważ, że w animacji pierwsza warstwa to Y=0% (umieszczony na górze) while X czy zmiany od 0% do 100%. Dla drugiej warstwy mamy to samo dla X ale Y=100% (umieszczony na dole).

Dlaczego używać conic-gradient() zamiast linear-gradient()?

Dobre pytanie! Intuicyjnie, powinniśmy użyć gradientu liniowego, aby stworzyć dwukolorowe gradienty, takie jak ten:

linear-gradient(90deg, red 50%, blue 0)

Ale możemy też sięgnąć po to samo za pomocą a conic-gradient() — i mniej kodu. Redukujemy kod, a przy okazji uczymy się nowej sztuczki!

Przesuwanie kolorów w lewo i w prawo to fajny sposób na sprawienie, by wyglądało, jakbyśmy zmieniali kolory, ale może być lepiej, jeśli zamiast tego natychmiast zmienimy kolory — w ten sposób nie ma szans, aby kropka programu ładującego migała dwoma kolorami jednocześnie . Aby to zrobić, zmieńmy animationfunkcja odliczania czasu od linear do steps(1)

Kropki ładowarki

Jeśli podążałeś wraz z pierwszy artykuł z tej serii, założę się, że wiesz, co będzie dalej: Maski CSS! To, co sprawia, że ​​maski są tak wspaniałe, to to, że pozwalają nam trochę „wyciąć” części tła w kształcie kolejnego elementu. Tak więc w tym przypadku chcemy zrobić kilka kropek, pokazać gradienty tła przez kropki i wyciąć wszystkie części tła, które nie są częścią kropki.

Będziemy używać radial-gradient() dla tego:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Jest tam trochę zduplikowanego kodu, więc stwórzmy zmienną CSS, aby zmniejszyć wszystko:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Fajne fajne. Ale teraz potrzebujemy nowej animacji, która pomoże przesuwać kropki w górę iw dół między animowanymi gradientami.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Tak, to w sumie trzy gradienty radialne, wszystkie w tej samej konfiguracji i tym samym rozmiarze — animacja zaktualizuje położenie każdego z nich. Zwróć uwagę, że X współrzędna każdej kropki jest stała. The mask-position jest zdefiniowany tak, że pierwsza kropka znajduje się po lewej stronie (0%), drugi w środku (50%), a trzeci po prawej (100%). Aktualizujemy tylko Y współrzędne z 0% do 100% żeby kropki tańczyły.

Oto, co otrzymujemy:

Teraz połącz to z naszą animacją gradientu, a magia zacznie się dziać:

Odmiany ładowarki kropkowej

Zmienna CSS, którą stworzyliśmy w poprzednim przykładzie, znacznie ułatwia zamianę nowych kolorów i tworzenie większej liczby odmian tego samego programu ładującego. Na przykład różne kolory i rozmiary:

A co z innym ruchem dla naszych kropek?

Tutaj wszystko, co zrobiłem, to zaktualizowanie animacji, aby uwzględnić różne pozycje, i otrzymaliśmy inny program ładujący z tą samą strukturą kodu!

Technika animacji, której użyłem do warstw masek, może być również używana z warstwami tła, aby stworzyć wiele różnych programów ładujących z jednym kolorem. Napisałem na ten temat szczegółowy artykuł. Zobaczysz, że z tej samej struktury kodu możemy tworzyć różne odmiany, po prostu zmieniając kilka wartości. Na końcu artykułu podam kilka przykładów.

Dlaczego nie ładowarka z jedną kropką?

Ten powinien być dość łatwy do groka, ponieważ używam tej samej techniki, ale z prostszą logiką:

Oto kolejny przykład programu ładującego, w którym również jestem animowany radial-gradient w połączeniu Filtry CSS i mix-blend-mode aby stworzyć efekt blobby:

Jeśli sprawdzisz kod, zobaczysz, że wszystko, co naprawdę robię, to animowanie background-position, dokładnie tak, jak zrobiliśmy z poprzednim loaderem, ale dodając kreskę background-size aby wyglądało na to, że kropelka staje się większa w miarę wchłaniania kropek.

Jeśli chcesz zrozumieć magię kryjącą się za efektem kleksa, możesz odwołać się do te interaktywne slajdy (Tylko Chrome) przez Ana Tudor bo tak dobrze ogarnia temat!

Oto kolejny pomysł na ładowarkę punktów, tym razem przy użyciu innej techniki:

To tylko 10 deklaracji CSS i klatka kluczowa. Główny element i jego dwa pseudoelementy mają tę samą konfigurację tła z jednym gradientem promieniowym. Każdy z nich tworzy jedną kropkę, w sumie trzy. Animacja przesuwa gradient z góry na dół, używając różnych opóźnień dla każdej kropki.

Aha, i zwróć uwagę, jak to demo używa siatki CSS. To pozwala nam wykorzystać domyślną wartość siatki stretch wyrównanie tak, aby oba pseudoelementy pokrywały cały obszar swojego rodzica. Nie ma potrzeby dobierania rozmiarów! Popchnij trochę dookoła za pomocą translate() i wszystko gotowe.

Więcej przykładów!

Aby przybliżyć sprawę, chcę zostawić Ci kilka dodatkowych przykładów, które są naprawdę odmianami tego, na co się przyjrzeliśmy. Przeglądając dema, zobaczysz, że podejścia, które tu omówiliśmy, są bardzo elastyczne i otwierają mnóstwo możliwości projektowych.

Dalej…

OK, więc omówiliśmy ładowarki punktowe w tym artykule i spinnery w ostatnim. W następnym artykule z tej czteroczęściowej serii zwrócimy uwagę na inny popularny typ ładowacza: kraty. Weźmiemy wiele z tego, czego nauczyliśmy się do tej pory i zobaczymy, jak możemy je rozszerzyć, aby stworzyć kolejny ładowacz pojedynczych elementów z jak najmniejszą ilością kodu i jak największą elastycznością.

---

Ładowarki jednoelementowe: Dots pierwotnie opublikowany w dniu Sztuczki CSS. Powinieneś pobierz biuletyn.

• Coinsmart. Najlepsza w Europie giełda bitcoinów i kryptowalut.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. DARMOWY DOSTĘP.
• CryptoJastrząb. Radar Altcoin. Bezpłatna wersja próbna.
• Źródło: https://css-tricks.com/single-element-loaders-the-dots/