Ładowanie… Animacja w waniliowym JavaScript

Wprowadzenie

Podczas tworzenia witryn i aplikacji internetowych, w tym animacja ładowania, może znacznie poprawić wrażenia użytkownika, komunikując, co się dzieje. To angażuje użytkowników i utrzymuje ich uwagę podczas ładowania treści, a także pomaga użytkownikom zrozumieć, co się dzieje, zamiast pozostawiać ich zgadywanie.

W tym przewodniku przyjrzymy się, jak używać Vanilla JavaScript do tworzenia animacji ładowania. Będziemy współpracować z obydwoma animowanymi GIF oraz moduły ładujące utworzone za pomocą CSS i zobacz, jak z nich korzystać w dwóch scenariuszach: ładowanie zawartości podczas uruchamiania aplikacji/strony internetowej lub żądanie zawartości z zewnętrznego interfejsu API.

Jak stworzyć program ładujący

Ludzie mogą chcieć wyświetlać swój program ładujący na różne sposoby. Na potrzeby tego przewodnika zbudujemy moduł ładujący, który obejmie cały ekran, a następnie zniknie po zakończeniu ładowania strony. Przede wszystkim musimy stworzyć zastępczą stronę HTML:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

Dla uproszczenia mamy tylko dwa <div> bloki – jeden dla loadera i jeden dla zawartości strony.

Jak wspomniano wcześniej, ikona ładowania może być GIF, animowana ikona utworzona za pomocą CSS lub coś innego. Ważną rzeczą do zapamiętania jest to, że to samo podejście dotyczy każdego rodzaju używanej przez nas ikony ładowania.

Utwórz program ładujący za pomocą GIF

A GIF to animowana ikona, która gra w nieskończoność. Raz stworzyliśmy nasz GIF, zaprojektujemy styl loader-container div, który go pomieści. Jest wiele sposobów na stylizację! Tutaj możesz być naprawdę kreatywny. Po prostu dodamy warstwę z czarnym tłem na górze naszej strony obok ikony, aby „zablokować” ładującą się zawartość:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

Gdy teraz załadujemy naszą stronę internetową, zobaczymy czarne tło z symbolem GIF ładowanie na środku ekranu, podobnie do tego:

W tym momencie jesteśmy gotowi do wdrożenia ładowania za pomocą JavaScript. Ale zobaczmy też, jak możemy użyć animacji utworzonej w CSS zamiast a GIF, który nie wymaga dodatkowego pliku do importu.

Utwórz program ładujący za pomocą CSS

Dokładnie taką samą ikonę stworzymy za pomocą CSS. Pamiętaj, stworzyliśmy dodatkowy div (spinner) w środku loader-container div i właśnie tego będziemy używać do reprezentowania ikony:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

Powyższy kod pomoże nam stworzyć ikonę loadera CSS, której możemy teraz użyć div-kontenera ładującego do wyśrodkowania i dodania czarnego tła, tak jak to robiliśmy wcześniej:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

Teraz, gdy widzieliśmy dostępne dwa typy animowanych programów ładujących, użyjmy JavaScript do kontrolowania, kiedy ta animacja ładowania pojawia się i znika.

Jak zaimplementować animację ładowania za pomocą JavaScript

JavaScript pozwala nam manipulować naszą strukturą HTML i usuwać lub ukrywać loader-container który jest aktualnie wyświetlany przed zawartość strony internetowej. Można to osiągnąć na dwa główne sposoby – po prostu ukrywanie loader-containerlub całkowicie go usunąć.

Niezależnie od wybranego podejścia, pierwszym krokiem jest użycie querySelector() or getElementById() odzyskać loader-container abyśmy mogli nim manipulować:

const loaderContainer = document.querySelector('.loader-container');

Po drugie, będziemy używać eventListener słuchać load zdarzenie, aby wywołać funkcję zwrotną, gdy load zdarzenie ma miejsce:

window.addEventListener('load', () => { // ...
});

Ukrywanie ładowania… Elementu

Najczęstszym podejściem jest ukrywanie loader-container w display: none tak, że znika po pełnym załadowaniu treści.

HTML DOM pozwala nam zmienić styl naszych elementów HTML z JavaScript, a poniższy kod wskazuje, że ustawiamy kontener modułu ładującego display własność do none aby nie pojawił się po load zakończony powodzeniem:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

Alternatywnie możesz utworzyć oddzielną klasę, która posiada display: none własność:

.loader-container-hidden { display: none;
}

A następnie za pomocą classList.add() dodać klasę do loader-container element:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

Usuwanie elementu ładującego…

Do tej pory widzieliśmy główną metodę, która pozwala nam ukryć nasze loader-container, co oznacza, że ​​element jest nadal obecny, ale ukryty. Inną opcją jest całkowite usunięcie elementu:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

W tym momencie, gdy ładujemy naszą stronę, animacja ładowania będzie wyświetlana do momentu pełnego załadowania zawartości strony.

Implementacja animacji ładowania podczas żądania zawartości zewnętrznej z interfejsu API

Pobieranie treści z zewnętrznego interfejsu API to kolejna sytuacja, która może wymagać włączenia modułu ładującego. Pobranie i wyświetlenie tego typu treści może zająć trochę czasu, dlatego najlepiej jest dołączyć program ładujący.

W naszym przypadku spróbujmy uzyskać wycenę od API cytatów za pomocą wbudowanego interfejsu Fetch API. Zauważ, że kod HTML, który utworzyliśmy na początku tego artykułu, ma „Generuj wycenę” przycisk. Wszystko, co musimy zrobić, to użyć document.querxySelector() metoda, aby pobrać element i utworzyć funkcję zwrotną do obsługi a click zdarzenie, które jest wyzwalane, gdy użytkownik kliknie przycisk:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Pomoże nam to w uzyskaniu losowych cytatów do naszej aplikacji, ale chcielibyśmy mieć animacja ładowania aby użytkownik wiedział, że oczekujemy treści. Aby to osiągnąć, stworzymy dwie metody, jedną do wyświetlenia loader-container a drugi, aby to ukryć:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

W tym momencie możemy wreszcie włączyć animację ładowania do funkcji zwrotnej. Po rozpoczęciu pobierania funkcja zwrotna wyświetli animację ładowania i ukryje ją po odebraniu danych:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Wnioski

W tym artykule nauczyliśmy się używać waniliowego JavaScript do tworzenia animacji ładowania i odpowiedniego jej wyświetlania. Rozważyliśmy różne podejścia do osiągnięcia tego celu i przyjrzeliśmy się kilku różnym przypadkom użycia animacji ładowania. Zdecydowaliśmy się użyć obracającego się koła jako ładowarki, ale możesz to zmienić w dowolny sposób – możesz swobodnie tworzyć własne GIF lub animowany program ładujący CSS.

• 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://stackabuse.com/loading-animation-in-vanilla-javascript/