Twórz jednoelementowe błystki i ładowarki z CSSPIN

Możesz zbudować niesamowite rzeczy za pomocą CSS3 niestandardowe pola wprowadzania do listy rozwijane i nawet Grafika wektorowa. Te techniki są szybko wyprzedza JavaScript, ułatwiając programistom tworzenie lepszych doświadczeń użytkowników.

Jedną z najtrudniejszych rzeczy do zbudowania jest ładowanie animacji spinnera ale nowoczesna animacja CSS sprawia, że ​​jest to całkiem proste.

Aby zaoszczędzić czas budując od podstaw, możesz użyć biblioteki takiej jak CSSPIN z tonami predefiniowane niestandardowe błystki. Wszystkie te animacje można dowolnie klonować i pozyskiwać z otwartych źródeł pełny dostęp edytować kod, jak chcesz.

Konfigurowanie spinnera z tą biblioteką jest proste. Ty tylko skopiuj bibliotekę CSS na twojej stronie dodaj niestandardowe elementy HTML gdziekolwiek chcesz się pojawić.

Te niestandardowe błystki używają tylko jeden element HTML stworzyć efekt animacji. Jest to ogromne, ponieważ grafika i efekt animacji to renderowane wyłącznie za pomocą klas CSS.

A ponieważ masz dostęp do kodu źródłowego, który możesz zastępuj kształty, kolory, rozmiary i prędkości animacji lepiej pasuje do twoich projektów.

Zanotuj kod używa składni LESS, więc musisz znać ten język przetwarzania wstępnego, aby dokonać większych zmian.

Ale można znaleźć mnóstwo zwykłe przykłady CSS na głównej stronie demonstracyjnej wraz z proste instrukcje na stronie GitHub.

Jeśli znasz npm lub Altana to są metody alternatywne do instalacji biblioteki.

Bez względu na to, jak go zainstalujesz, jest to świetna biblioteka animacji CSS do pracy. To miało być w pełni modułowy z dużą ilością miejsca na nowe błystki, nowe animacje i dostosowania od innych programistów.

Aby dowiedzieć się więcej i przejrzeć całą dokumentację, sprawdź CSSPIN repo na GitHub. Twórca również zrobił mały konfiguracja wideo które możesz obejrzeć poniżej.