Ładowarki jednoelementowe: Spinner

Tworzenie programów ładujących tylko CSS jest jednym z moich ulubionych zadań. Zawsze przyjemnie jest patrzeć na te nieskończone animacje. I oczywiście są dużo technik i podejść do ich wykonania — nie ma potrzeby szukaj dalej niż CodePen żeby zobaczyć ile. Jednak w tym artykule zobaczymy, jak sprawić, by jeden moduł ładujący pisał jak najmniej kodu.

Mam stworzył kolekcję ponad 500 pojedynczych ładowarek div a w tej czteroczęściowej serii podzielę się sztuczkami, których użyłem do stworzenia wielu z nich. Omówimy ogromną liczbę przykładów, pokazujących, jak małe poprawki mogą prowadzić do zabawnych odmian i jak mało kodu musimy napisać, aby to wszystko się wydarzyło!

W tym pierwszym artykule stworzymy jeden z bardziej powszechnych wzorców ładujących: kręcące się pręty:

Oto podejście

Trywialną implementacją tego modułu ładującego jest utworzenie jednego elementu dla każdego paska owiniętego wewnątrz elementu nadrzędnego (dla łącznie dziewięciu elementów), a następnie zabawa z opacity i transform aby uzyskać efekt wirowania.

Moja implementacja wymaga jednak tylko jednego elementu:

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

…i 10 deklaracji CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Rozbijmy to

Na pierwszy rzut oka kod może wyglądać dziwnie, ale zobaczysz, że jest prostszy niż mogłoby się wydawać. Pierwszym krokiem jest określenie wymiaru elementu. W naszym przypadku jest to 150px kwadrat. możemy umieścić aspect-ratio użyć, aby element pozostał kwadratowy bez względu na wszystko.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Budując programy ładujące CSS, zawsze staram się mieć jedną wartość do kontrolowania całkowitego rozmiaru. W tym przypadku jest to width a wszystkie obliczenia, które omówimy, będą odnosić się do tej wartości. Pozwala mi to zmienić pojedynczą wartość do sterowania ładowarką. Zawsze ważne jest, aby móc łatwo dostosować rozmiar naszych ładowarek bez konieczności dostosowywania wielu dodatkowych wartości.

Następnie użyjemy gradientów do stworzenia pasków. To najtrudniejsza część! Użyjmy pierwszej gradient do stworzenia drugiej paski jak poniżej:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Nasz gradient jest zdefiniowany przez jeden kolor i dwa stopnie koloru. Rezultatem jest jednolity kolor bez blaknięcia i przejść. Rozmiar jest równy 34% szeroki i 8% wysoki. Jest również umieszczony w centrum (50%). Sztuczka polega na użyciu wartości słowa kluczowego space — to powiela gradient, dając nam łącznie dwa słupki.

Cena Od Specyfikacja:

Obraz jest powtarzany tak często, jak tylko zmieści się w obszarze pozycjonowania tła, bez przycinania, a następnie obrazy są rozmieszczane, aby wypełnić obszar. Pierwszy i ostatni obraz dotykają krawędzi obszaru.

Używam szerokości równej 34% co oznacza, że ​​nie możemy mieć więcej niż dwóch taktów (3*34% jest większa 100%), ale przy dwóch taktach będziemy mieli puste spacje (100% - 2 * 34% = 32%). Ta przestrzeń jest umieszczona pośrodku między dwoma prętami. Innymi słowy, używamy szerokości gradientu znajdującego się pomiędzy 33% i 50% aby upewnić się, że mamy co najmniej dwa paski z niewielką przestrzenią między nimi. Wartość space to jest to, co właściwie je dla nas umieszcza.

Robimy to samo i robimy drugi podobny gradient, aby uzyskać jeszcze dwa paski na górze i na dole, co daje nam background wartość nieruchomości:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Możemy to zoptymalizować za pomocą zmiennej CSS, aby uniknąć powtórzeń:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Tak więc teraz mamy cztery słupki i dzięki zmiennym CSS możemy raz zapisać wartość koloru, co ułatwia późniejszą aktualizację (tak jak zrobiliśmy to z rozmiarem loadera).

Aby utworzyć pozostałe paski, dotknijmy .loader element i jego ::before pseudoelement, aby uzyskać cztery dodatkowe paski, co daje w sumie osiem.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Zwróć uwagę na użycie display: grid. To pozwala nam polegać na domyślnych ustawieniach siatki stretch wyrównanie, aby pseudoelement pokrywał cały obszar swojego rodzica; w związku z tym nie ma potrzeby określania na nim wymiaru — kolejna sztuczka, która redukuje kod i pozwala uniknąć zajmowania się wieloma wartościami!

Teraz obróćmy pseudoelement o 45deg aby ustawić pozostałe pręty. Najedź na następujące demo, aby zobaczyć sztuczkę:

Ustawienie przezroczystości

To, co staramy się zrobić, to stworzyć wrażenie, że jest jeden pasek, który podczas poruszania się po okręgu pozostawia za sobą ślad zanikających pasków. To, czego teraz potrzebujemy, to bawić się przezroczystością naszych pasków, aby zrobić ten ślad, co zrobimy za pomocą CSS mask w połączeniu z gradientem stożkowym w następujący sposób:

mask: conic-gradient(from 22deg,#0003,#000);

Aby lepiej zobaczyć sztuczkę, zastosujmy to do pełnokolorowego pudełka:

Przezroczystość koloru czerwonego stopniowo wzrasta zgodnie z ruchem wskazówek zegara. Stosujemy to w naszej ładowarce i mamy pręty o różnym przezroczystości:

W rzeczywistości każdy pasek wydaje się zanikać, ponieważ jest zamaskowany gradientem i mieści się między dwoma półprzezroczystymi kolorami. Jest to prawie niezauważalne, gdy to działa, więc można powiedzieć, że wszystkie paski mają ten sam kolor i inny poziom krycia.

Rotacja

Zastosujmy animację obrotu, aby uzyskać nasz loader. Pamiętaj, że potrzebujemy animacji schodkowej, a nie ciągłej, dlatego używam steps(8). 8 to nic innego jak liczba słupków, więc tę wartość można zmienić w zależności od tego, ile słupków jest w użyciu.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Otóż ​​to! Mamy nasz loader z jednym elementem i kilkoma linijkami CSS. Możemy łatwo kontrolować jego rozmiar i kolor, dostosowując jedną wartość.

Ponieważ używaliśmy tylko ::before pseudoelement, możemy dodać jeszcze cztery paski za pomocą ::after na koniec z 12 kreskami i prawie tym samym kodem:

Zaktualizujemy rotację naszych pseudo-elementów do rozważenia 30deg i 60deg zamiast 45deg podczas używania dwunastostopniowej animacji zamiast ośmiu. Zmniejszyłem też wzrost do 5% zamiast 8% aby paski były trochę cieńsze.

Zauważ też, że mamy grid-area: 1/1 na pseudoelementach. Dzięki temu możemy umieścić je w tym samym miejscu co siebie, ułożone jeden na drugim.

Zgadnij co? Możemy sięgnąć po ten sam loader korzystając z innej implementacji:

Czy potrafisz zrozumieć logikę kodu? Oto wskazówka: nieprzezroczystość nie jest już obsługiwana przez CSS mask ale wewnątrz gradientu i używa również opacity własność.

Dlaczego zamiast kropek?

Możemy to zrobić całkowicie:

Jeśli sprawdzisz kod, zobaczysz, że pracujemy teraz z gradientem radialnym zamiast liniowym. Poza tym koncepcja jest dokładnie taka sama, w której maska ​​sprawia wrażenie nieprzezroczystości, ale kształty zostały wykonane jako koła zamiast linii.

Poniżej znajduje się rysunek ilustrujący nową konfigurację gradientu:

Jeśli używasz Safari, pamiętaj, że demo może zawierać błędy. Dzieje się tak, ponieważ Safari obecnie nie obsługuje at składnia w gradientach radialnych. Ale możemy nieco zmienić konfigurację gradientu, aby to przezwyciężyć:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Więcej przykładów ładowaczy

Oto kolejny pomysł na ładowarkę obrotową podobną do poprzedniej.

W tym przypadku tylko na nim polegam background i mask do stworzenia kształtu (nie są potrzebne żadne pseudoelementy). Definiuję również konfigurację ze zmiennymi CSS, aby móc tworzyć wiele wariacji z tego samego kodu — kolejny przykład potęgi zmiennych CSS. Napisałem kolejny artykuł o tej technice jeśli chcesz poznać więcej szczegółów.

Pamiętaj, że niektóre przeglądarki nadal polegają na a -webkit- przedrostek dla mask-composite z własnym zestawem wartości i nie wyświetli pokrętła w wersji demonstracyjnej. Oto sposób na zrobienie tego bez mast-composite dla większej obsługi przeglądarek.

Mam dla Ciebie jeszcze jeden:

Do tego używam background-color do kontrolowania koloru i używania mask i mask-composite aby stworzyć ostateczny kształt:

Zanim skończymy, oto kilka innych spinningowych ładowarek, które zrobiłem jakiś czas temu. Opieram się na różnych technikach, ale nadal używam gradientów, masek, pseudoelementów itp. To może być dobre ćwiczenie, aby zrozumieć logikę każdego z nich i jednocześnie nauczyć się nowych sztuczek. To powiedziawszy, jeśli masz jakieś pytania na ich temat, sekcja komentarzy znajduje się poniżej.

Zamykając

Widzisz, jest tak wiele do zrobienia w CSS z tylko jednym div, kilkoma gradientami, pseudoelementami, zmiennymi. Wygląda na to, że stworzyliśmy całą masę różnych obrotowych ładowarek, ale wszystkie są zasadniczo takie same, z niewielkimi modyfikacjami.

To dopiero początek. W tej serii przyjrzymy się większej liczbie pomysłów i zaawansowanych koncepcji tworzenia programów ładujących CSS.

---

Ładowarki jednoelementowe: Spinner 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-spinner/