Ładowarki jednoelementowe: Bary

Przyjrzeliśmy się spinnerom. Przyjrzeliśmy się kropkom. Teraz zajmiemy się innym powszechnym wzorcem dla ładowaczy: paski. W trzecim artykule z tej serii zrobimy to samo, co w innych, tworząc tylko jeden element i elastyczny CSS, który ułatwia tworzenie odmian.

Zacznijmy od nie jednego, nie dwóch, ale 20 przykładów ładowarek prętów.

Co?! Czy zamierzasz szczegółowo opisać każdy z nich? To za dużo na artykuł!

Na pierwszy rzut oka może się tak wydawać! Ale wszystkie opierają się na tej samej strukturze kodu, a my aktualizujemy tylko kilka wartości, aby utworzyć odmiany. To cała moc CSS. Nie uczymy się tworzyć jednego programu ładującego, ale uczymy się różnych technik, które pozwalają nam tworzyć tyle programów ładujących, ile chcemy, używając tylko tej samej struktury kodu.

Zróbmy kilka batoników!

Zaczynamy od zdefiniowania dla nich wymiarów za pomocą width (lub height) W aspect-ratio aby zachować proporcje:

.bars { width: 45px; aspect-ratio: 1;
}

W pewnym sensie „podrabiamy” trzy paski z liniowym gradientem w tle — bardzo podobnie do tego, jak stworzyliśmy ładowacze kropek w części 2 tej serii.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Powyższy kod da nam następujący wynik:

Podobnie jak w przypadku innych artykułów z tej serii, zajmiemy się wieloma background naciągnięcie. Tak więc, jeśli kiedykolwiek poczujesz, że skaczemy za szybko lub potrzebujesz więcej szczegółów, sprawdź je. Możesz również przeczytać moje Przepełnienie stosu odpowiedź, gdzie podaję szczegółowe wyjaśnienie jak to wszystko działa.

Animowanie barów

Albo animujemy rozmiar lub pozycję elementu, aby utworzyć moduł ładowania prętów. Animujmy rozmiar, definiując następujące klatki kluczowe animacji:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Widzisz, co się tam dzieje? Między 0% a 100% animacja zmienia background-size gradientu tła elementu. Każda klatka kluczowa ustawia trzy rozmiary tła (po jednym dla każdego gradientu).

A oto, co otrzymujemy:

Czy możesz zacząć wyobrażać sobie wszystkie możliwe wariacje, które możemy uzyskać, bawiąc się różnymi konfiguracjami animacji dla rozmiarów lub pozycji?

Ustalmy rozmiar na 20% 50% i tym razem zaktualizuj pozycje:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…co daje nam kolejną ładowarkę!

Prawdopodobnie już znasz tę sztuczkę. Wystarczy zdefiniować oś czasu, którą przekładasz na klatkę kluczową. Animując rozmiar, pozycję — lub jedno i drugie! — na wyciągnięcie ręki jest nieskończona ilość możliwości ładowacza.

A kiedy już oswoimy się z taką techniką, możemy pójść dalej i użyć bardziej złożonego gradientu, aby stworzyć równe jeszcze ładowarki.

Spodziewaj się dwóch ostatnich przykładów w tym demo, wszystkie programy ładujące paski używają tych samych podstawowych znaczników i stylów oraz różnych kombinacji animacji. Otwórz kod i spróbuj zwizualizować każdą klatkę niezależnie; zobaczysz, jak stosunkowo trywialne jest zrobienie dziesiątek — jeśli nie setki — odmian.

Ekscytacja

Czy pamiętasz sztuczkę z maską, którą zrobiliśmy z ładowaczami punktów w? drugi artykuł z tej serii? Tutaj możemy zrobić to samo!

Jeśli zastosujemy całą powyższą logikę wewnątrz mask możemy użyć dowolnej konfiguracji tła, aby dodać fantazyjne zabarwienie do naszych programów ładujących.

Weźmy jedno demo i zaktualizujmy je:

Wszystko, co zrobiłem, to zaktualizowanie wszystkich background-* w mask-* i dodałem kolorowanie gradientowe. Tak proste, a jednak dostajemy kolejną fajną ładowarkę.

Więc nie ma różnicy między kropkami a paskami?

Bez różnicy! Napisałem dwa różne artykuły, aby objąć jak najwięcej przykładów, ale w obu opieram się na tych samych technikach:

1. Gradienty do tworzenia kształtów (kropki lub paski, a może coś innego)
2. Animacja background-size i / lub background-position stworzyć animację ładowarki
3. Dodanie maski, aby dodać odrobinę kolorów

Zaokrąglanie słupków

Spróbujmy tym razem czegoś innego, w którym możemy zaokrąglić krawędzie naszych pasków.

Korzystanie z jednego elementu i jego ::before i ::after pseudos, definiujemy trzy identyczne pręty:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

To daje nam trzy takty, tym razem bez polegania na liniowym gradiencie:

Teraz sztuczka polega na wypełnieniu tych pasków pięknym gradientem. Aby zasymulować ciągły gradient, musimy pobawić się background nieruchomości. Na powyższym rysunku zielony obszar określa obszar objęty przez ładowarkę. Obszar ten powinien być wielkości gradientu, a jeśli wykonamy obliczenia, jest to równe pomnożeniu obu stron oznaczonych etykietą S na schemacie, lub background-size: var(--s) var(--s).

Ponieważ nasze elementy są umieszczane indywidualnie, musimy zaktualizować położenie gradientu wewnątrz każdego z nich, aby upewnić się, że wszystkie się nakładają. W ten sposób symulujemy jeden ciągły gradient, mimo że tak naprawdę są to trzy.

W przypadku elementu głównego (umieszczonego pośrodku) tło musi znajdować się pośrodku. Korzystamy z:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Dla pseudoelementu po lewej stronie potrzebujemy tła po lewej stronie

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

A dla pseudo po prawej, tło musi być ustawione po prawej:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Używając tej samej zmiennej CSS, --_i, którego użyliśmy do tłumaczenia, możemy napisać kod w ten sposób:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Teraz wszystko, co musimy zrobić, to animować wysokość i dodać kilka opóźnień! Oto trzy przykłady, w których różnią się tylko kolory i rozmiary:

Zamykając

Mam nadzieję, że do tej pory czujesz się bardzo zachęcony wszystkimi mocami, które masz, aby tworzyć złożone animacje ładowania. Wszystko, czego potrzebujemy, to jeden element, gradienty lub pseudosy, aby narysować paski, a następnie kilka klatek kluczowych do poruszania rzeczy. To cały przepis na nieskończoną liczbę możliwości, więc wyjdź i zacznij gotować kilka fajnych rzeczy!

Do następnego artykułu zostawię Was z zabawną kolekcją ładowarek, w których kombinuję kropki i kraty!

---

Ładowarki jednoelementowe: Bary 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-bars/