12 lutego 2019 · 11 minut czytać

co to jest korzystanie z downloadera na stronie?

jednym z problemów, o którym każdy Web developer musi pamiętać, jest czas ładowania strony. Przy wyższych prędkościach Internetu, które mamy obecnie, większość stron i aplikacji otwiera się dość szybko. Jednak zawsze pozostaje trochę miejsca na poprawę.

w niektórych przypadkach nieuniknione jest, aby użytkownicy poczekali krótką chwilę na załadowanie wszystkich danych i stron. W takich chwilach potrzebujesz czegoś, co przyciągnie uwagę użytkowników i utrzyma ich na stronie wystarczająco długo, aby załadować całą zawartość.

jednym ze sposobów, aby to zrobić, jest dodanie przyciągającej wzrok animacji wczytywania lub wczytywania gif do witryny, aby zapewnić użytkownikom rozrywkę podczas oczekiwania na załadowanie reszty witryny.

na przykład, nawet dla strony Amelia, używamy bardzo prostej animacji ładowania, aby poinformować naszych użytkowników, że coś się dzieje w tej chwili.

rzućmy okiem na te ciekawe animacje wczytywania gif.

znaleźliśmy jedne z najlepszych animacji wczytywania i wczytywania gif-ów, a oto one:

Animacja Orb

jest to świetny przykład gifa na ekranie ładowania, który przyciąga twoją uwagę na tyle długo, aby reszta treści mogła się załadować. Przedstawia obracający się okrąg otoczony tajemniczym dymem, którego nie można powstrzymać przed obejrzeniem przez chwilę. A moment to naprawdę wszystko, czego potrzeba…

Ładowanie mikro animacji

ponieważ strona stojąca za tą animacją ładowania jest browarem, ten GIF ładowarki ma sens na świecie. Przedstawia on proces produkcji produktów browaru, który nie tylko zmniejszy frustrację użytkowników, którzy muszą czekać na załadowanie strony, ale faktycznie wzbudzi ich zainteresowanie w kreatywny sposób.

Ładowarka Avanti e6e6

Ten prosty animowany gif wczytywania jest idealny do przyciągnięcia uwagi użytkownika poprzez przeniesienie pozycji grafiki w odpowiedniej kolejności. Piękno tej ikony ładowania tkwi w jej prostocie. Jest to intuicyjne i będzie zajmować użytkowników, a nie pozwalać im opuszczać stronę w frustracji.

wczytywanie animacji ekranu — Klepsydra

Ten animowany GIF z ładowarki jest świetny z dwóch powodów. Uwaga „dzięki za cierpliwość” pomaga nawiązać komunikację z użytkownikiem i uzyskać pewien poziom zrozumienia. Preloader klepsydry natomiast przyciąga uwagę użytkownika i sprawia, że jego oczekiwanie jest wygodniejsze.

„bouncy” — B&wczytywanie animacji 9

najlepsze rzeczy są często najprostsze i ta sama zasada dotyczy animacji ładowania CSS. Chociaż ten może wydawać się nudny dla niektórych, jest rzeczywiście doskonały w swojej prostocie. A najlepsze w tym jest to, że nie możesz przestać na niego patrzeć.

Ładowarka Do Topienia

ten GIF wczytywania animacji łączy dwa bardzo skuteczne elementy, jeśli chodzi o przyciągnięcie uwagi użytkownika i uprzyjemnienie mu czasu oczekiwania.

wykorzystuje płynny efekt, który przypomina topnienie i natychmiast zajmuje uwagę użytkownika, a jednocześnie dodaje kojące elementy, takie jak widoczna świecąca linia.

Ładowanie rzeczy

wzór zagnieżdżania jest zawsze dobrym wyborem, jeśli chodzi o Ładowanie animowanych GIFów. Dodaj efekt 3D do miksu, a otrzymasz idealną animację ładującą, którą warto stworzyć!

Animacja Preloadeera

projektując animację ładowania, zawsze myśl o odbiorcach docelowych i o tym, co chcieliby zobaczyć. Ta strona internetowa wykonała świetną robotę, łącząc kilka rzeczy związanych ze Świętami Bożego Narodzenia i tworząc preloader gif idealny dla kursów online ukierunkowanych na dzieci. Wyzwalanie reakcji emocjonalnej z użytkownikami jest zawsze dobrym pomysłem, jeśli wiesz, jak to zrobić dobrze.

Animacja Ładowarki

ktokolwiek zaprojektował ten czekający animowany gif, chciał się upewnić, że zajmuje on uwagę użytkownika na kilku różnych poziomach. Zamiast tworzyć prostą animację ładowania, zdecydowali się na wzór wyświetlania na wielu ekranach, który przyciąga wzrok i na pewno zajmie uwagę użytkownika na chwilę. Dodaj efekty obrotowe i kolory gradientu do miksu, a stworzysz piękne ekrany ładowania.

wizualizacja ekranu ładowania aplikacji

ten GIF paska ładowania nie tylko służy swojemu celowi, ale jest również naprawdę fajny i modny. Został zaprojektowany dla Android/iOS Mobile app/web i łączy obracający się glob z kontrastami kolorów, które tworzą ciekawy efekt wizualny sci-fi.

Ładowanie animacji

najgorszym sposobem tworzenia wczytywania obrazu GIF jest stworzenie czegoś, co nie ma sensu i nie opowiada żadnej historii. Użytkownicy nie chcą tego widzieć; chcą czegoś, co tworzy z nimi emocjonalną więź.

obrazy preloadera, które tutaj widzimy, są idealne do tego. Ta animacja ładowania z szybko zmieniającymi się liczbami i szybko obracającymi się kolorowymi paskami pozwala użytkownikowi wiedzieć, że witryna jest ładowana tak szybko, jak to możliwe, a problemy są przetwarzane w tle zaraz potem.

Free CSS& fragmenty JavaScript do tworzenia animowanych Loaderów

chociaż mieliśmy okazję zobaczyć kilka całkiem interesujących statycznych stron ładowania w przeszłości, dodawanie dynamicznych elementów do miksu jest zawsze dobrym pomysłem, gdy chcesz zająć uwagę użytkowników.

przyjrzyjmy się tej kolekcji wczytywania generatora gif, która pomoże Ci stworzyć animację wczytywania dokładnie tak, jak chcesz.

pasek ładowania z licznikiem

ten piękny pasek ładowania został zaprojektowany przez Nicolasa Slatinera i jest to intuicyjna animacja ładowania, która wyświetla procent ładowania. Design jest czysty, a jego piękno tkwi w prostocie. Jest to świetny GIF paska postępu, który zmieściłby się w każdej witrynie.

Light Loader

Ten lekki loader w kształcie spinnera to świetna animacja ładująca, która lubi proste projekty z odrobiną skrętu. Wykorzystuje kształt starburst w połączeniu z czystymi animacjami CSS3, aby stworzyć efekt ładowania gif, który natychmiast zajmie uwagę użytkownika.

Multi-Animated Loader

kilka linii JavaScript, aby dodać funkcję Pokaż/Ukryj, nawet jeśli możesz sprawić, że będzie działać nawet bez tej funkcji. Oznacza to, że można go uruchomić w czystym CSS3 z wieloma opcjami, w tym różnymi kolorami, rozmiarami i prędkością.

Canvas Fractal Loader

pamiętasz stary szkolny wygaszacz ekranu Windows? Ten pasiasty fraktalne płótno wczytywania ikony gif czuje się trochę. Używa dużo JavaScript i mimo, że nazywa się elementem canvas, w rzeczywistości nie używa elementu canvas na stronie.

w rzeczywistości powodem, dla którego się nazywa, jest fakt, że jest zasilany przez Sketch.js, który jest naturalną biblioteką canvas. Jeśli więc nie masz problemu z zabawą w JavaScript na swojej stronie, ta animacja ładowania jest jednym z najlepszych wyborów dla ciebie.

OuroboroCSS Loaders

OuroboroCSS loaders stworzone przez Geoffreya Crofte są zasilane przez czysty CSS i działają na powtarzającym się cyklu animacji, który daje złudzenie znikania w kształcie.

jednak, chociaż ten projekt jest idealny dla wewnętrznych loaderów, użycie go jako pełnej animacji ładowania strony może nie być najlepszym ruchem, ponieważ nie jest wystarczająco potężny, aby stać samotnie na całej stronie.

Thermometer Loader

projektując ten niestandardowy loader w stylu termometru, twórca Hugo Giraudel naprawdę przesunął granice CSS dzięki tej animacji ładowania poruszającej się w wielu różnych kolorach od dołu do góry. Animacje są czystym CSS i są tylko 3 elementy HTML zagnieżdżone wewnątrz siebie.

trzy.js Loader

trzy.js loader przez Lennart Hase jest taki fajny GIF obciążenia, że po prostu musiał dodać go do listy. Korzysta z darmowej Trójki.biblioteka js 3D do tworzenia obracającej się kostki na małej powierzchni, na którą nie można nie patrzeć.

animacja jest sterowana poprzez renderowanie JavaScript i WebGL. Ponieważ projektowanie 3D jest jednym z najfajniejszych nowych trendów w projektowaniu stron internetowych, dodanie elementów 3D do animacji ładowania jest zawsze dobrym pomysłem.

koło Organiczne

Ten imponujący Canvas circle loader jest zbudowany w całości na elemencie HTML canvas przy użyciu wywołań CTX i JavaScript, aby stworzyć ten niesamowity i przyciągający wzrok efekt od podstaw. To nie jest krąg ładowarek, który można łatwo włączyć do dowolnej strony internetowej, ale musisz przyznać, że warto było go zobaczyć.

prosty Rotator kół

Jeśli chcesz, aby Ładowarka płótna była prosta, ładna, ale naprawdę skuteczna, ten może być właściwym wyborem dla ciebie. Obraca wewnętrzny krąg elementu canvas w nieskończoność z pewnym podstawowym JavaScript kontrolującym animację. Jedną z najlepszych rzeczy w prostych i eleganckich projektach, takich jak ten, jest fakt, że można je łatwo włączyć do dowolnej witryny bez zakłócania lub przytłaczania.

Pure CSS Loader Dots

Jeśli szukasz czystego CSS loader, ta fajna i zabawna animacja ładowania CSS jest zdecydowanie warta rozważenia. Jest prosty w konfiguracji, przyciągający wzrok i przyjemny do oglądania. Kolejnym dużym plusem jest to, że można go łatwo włączyć do dowolnej strony internetowej i służyć jej celowi świetnej animacji ładowania. Kształty kropek i animacje są uruchamiane przez CSS i nie jest wymagany JavaScript.

Ładowarka kwadratowa Przesuwna

Ten przesuwny kwadratowy ładowacz sprawia, że czekanie jest nieco mniej frustrujące, ponieważ utrzymuje oko w ruchu wraz z kwadratami. Świetne rozwiązanie dla firm, które sprzedają elektronikę lub gry online, aby utrzymać swoich użytkowników zaangażowanych w stronę internetową.

DotsLoaderView

odbijające się czarne kulki, które pojawiają się znikąd i znikają, służą jako element rozrywkowy i mogą być używane do stron internetowych, które chcą wyglądać reprezentacyjnie, ale ze szczyptą zabawy.

Ładowarka niewyraźna

niewyraźna ładowarka z trzema wirującymi kołami przekładni uosabia ruch i złożoność i może być odpowiednia dla firm sprzedających maszyny lub części mechaniczne.

CSS Stairs Loader

Ładowarka schodów malejących i wznoszących z białą piłką skaczącą na górze ma minimalistyczny design, ale jest bardzo prosta. Może to mieć sens dla firm, które chcą zaprezentować się jako poważne i godne zaufania.

Ładowanie pióra

dzięki lekkiemu dotykowi prostoty, kolorowe kółka przypominające gąsienice, które przesuwają się w lewo lub w prawo i znajdują się po każdej stronie, sprawiają, że ładowanie jest mniej nudne dla odwiedzających. Ładowarka jest odpowiednia dla prawie każdego rodzaju firm dzięki swojej uniwersalnej animacji i powinna rozbawiać odwiedzających podczas oczekiwania na lądowanie na stronie głównej.

CSS Loader

prosty loader typu „Uwaga getter”, taki jak ta tocząca się kostka, która staje się większa podczas przechodzenia do przodu i wraca do pierwotnego kształtu po powrocie, jest zarezerwowanym rozwiązaniem dla firm, które chcą wyglądać inteligentnie i wyrafinowane dla odwiedzających.

Vivid Spinner CSS3

vivid spinner loader z obracającą się tęczą, która toczy się w rodzaj geometrycznego kształtu kwiatu, może rozweselić odwiedzających i pomóc im przygotować się na coś zabawnego i ekscytującego. Taka ładowarka może być używana przez firmy, które sprzedają swoje produkty lub usługi dzieciom. Powinien dobrze działać na stronach edukacyjnych dla dzieci

Ekran ładowania Prism

Ekran ładowania prism powinien przypominać tło LinkedIn dla zdjęć. Ładowarka zdalnie wygląda jak konstelacje, które poruszają się w przestrzeni z głównym elementem pośrodku, który potencjalnie może zawierać logo firmy. Ładowarka może być używana w firmach, które współpracują z międzynarodowymi klientami, na przykład w sektorze B2B.

Loader

lubisz różnorodność? Oto ładowarka, która zapewnia odwiedzającym rozrywkę, pozwalając im zobaczyć odliczanie, któremu towarzyszy zmiana animacji różnych zdjęć. Należy pamiętać, że ten ładowacz może mieć dowolne zdjęcia obracające się, dzięki czemu może zaspokoić potrzeby każdej firmy.

Ładowarka przekierowująca

oto sylwetka człowieka z plecakiem odrzutowym na plecach lecącego tak szybko, jak tylko może. Taki loader, który przekieruje użytkownika na następną stronę, może być używany przez prawie każdą firmę, szczególnie te, które chciałyby podkreślić element szybkości swojego serwisu.

Codepen Ładowanie kropek

ten minimalistyczny i zwięzły projekt dot preloader może być używany na przykład przez artystów lub projektantów do ich portfolio online.

Animacja Preloadera

czy ten preloader nie powinien przypominać jednej z gier w węża? Ta animacja ikony energii z wtyczką może mieć sens dla Dostawców Internetu lub innych agencji, które pomagają firmom i klientom współpracować.

SVG ∞ Loader

brak JS, cross-browser, minimalny kod. 20 linii CSS i 4 linie wygenerowanego SVG.

pomidorowy loader z CSS vars

nie działa w Edge z powodu braku wsparcia dla calc() jako wartości opóźnienia animacji.

animowany flippreloader

niesamowity flip preloader wykonany w CSS. Kolory są w pełni logiczne na flip. Dowolne kolory można łatwo ustawić.

SpinKit

Simple loading spinners animated with CSS. See demo. SpinKit uses hardware accelerated (translate and opacity) CSS animations to create smooth and easily customizable animations.

CSS-Spinner

kolekcja 12 małych, eleganckich spinnerów CSS do wczytywania animacji Twojej strony.

zakończenie przemyśleń na temat korzystania z animacji wczytywania stron internetowych

projektując stronę internetową trzeba wziąć pod uwagę każdy najmniejszy szczegół. Posiadanie wspaniałej strony internetowej jest bezużyteczne, jeśli czas ładowania jest zbyt długi, a połowa użytkowników poddaje się, zanim jeszcze będą mieli szansę zobaczyć Twoją witrynę.

aby tego uniknąć, powinieneś włączyć ciekawą animację ładowania do swojej witryny i zająć uwagę użytkownika tak długo, jak to konieczne, aż reszta Treści się załaduje. Bądź kreatywny i zaprojektuj zabawny czekający gif, który każdy użytkownik z przyjemnością zobaczy!

Jeśli podobało ci się czytanie tego artykułu o wczytywaniu animacji, powinieneś również przeczytać te:

• niesamowite strony Portfolio z doskonałym designem (145 przykładów)
• schematy kolorów stron internetowych, które wyglądają niesamowicie: 30 palet kolorów
• UX Designer Portfolio stron internetowych, które przyciągają klientów
• 116 fajnych efektów tekstowych CSS