Jak wykonać preloader w czystym JavaScript’cie?

Front-end 6 minut czytania

Zapewne każdy z nas spotkał tzw. preloader, czyli element zasłaniający witrynę, dopóki ta nie zostanie w pełni załadowana. Jak stworzyć coś takiego? Tego dowiemy się w dzisiejszym artykule! 🙂

Efekt końcowy.

Zacznijmy od konkretów, bo nie chciałbym marnować Waszego czasu. Demo można znaleźć po tym oto adresem. Chciałbym abyśmy skupili się na mechanice, która powoduje, że preloader znika dopiero po załadowaniu się treści strony internetowej, dlatego wygląd jest mniej istotny (w tym przykładzie inspirowałem się jednym z projektów na CodePenie).

Kod HTML.

Prezentuje się w ten oto sposób:

<div class="preload">
  <div class="circles-group">
 	<div class="circle"></div>
 	<div class="circle"></div>
 	<div class="circle"></div>
 	<div class="circle"></div>
  </div>
</div>

Jest dosyć prosty, a mógłby być jeszcze prostszy, bo w praktyce do pełnego działania wystarczy nam div o klasie preload, reszta odpowiada tylko i wyłącznie za estetykę.

Kod CSS.

Ten jak zwykle jest najdłuższy, a wygląda w ten oto sposób:

.preload {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    background-color: #10131a;
    transition: opacity 400ms ease-in-out, visibility 0s 400ms;
}

.show-preloader {
    visibility: visible;
    opacity: 1;
}

.circle {
    background-color: #f9dc97;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    animation: bounce-circles 0.7s infinite ease-in-out;
}

.preload .circle:nth-child(1) {
     animation-delay: -0.6s;
}

.preload .circle:nth-child(2) {
     animation-delay: -0.5s;
}

.preload .circle:nth-child(3) {
     animation-delay: -0.4s;
}

.preload .circle:nth-child(4) {
    animation-delay: -0.3s;
}

@keyframes bounce-circles {
    0%, 40%, 100% {
 		transform: translateY(-10px);
    } 20% {
 		transform: translateY(-20px);
    }
}

Poza oczywistym stylowaniem naszych elementów warto zwrócić uwagę na kilka reguł, które są charakterystyczne dla preloaderów:

.preload {
    position: fixed;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
}

Za pomocą tych właściwości sprawiamy, że nasz element pozostanie widoczny na całym ekranie niezależnie od tego czy spróbujemy zjechać w dół witryny.

.preload {
    visibility: hidden;
    opacity: 0;
}

Z kolei ten zestaw reguł sprawi, że preloader nie będzie widoczny, dopóki tego nie zmienimy, dzięki czemu w przypadku gdy użytkownik będzie miał domyślnie wyłączony JavaScript, strona nie zostanie zakryta.

.show-preloader {
    visibility: visible;
    opacity: 1;
}

Tę klasę dodamy przed ładowaniem treści witryny, dzięki czemu użytkownik po wejściu na stronę od razu zobaczy nasz preloader, a nie ładującą się zawartość. Gdy już serwis się już załaduje, to nasz element zostanie usunięty, dzięki czemu osoba przeglądająca witrynę ujrzy jej treść.

Oczywiście animacja nie musi sprawiać, że nasz preloader zwyczajnie zniknie. Dla przykładu możemy zmodyfikować nasz kod, tworząc animację widoczną pod tym oto linkiem.

To chyba wszystkie ważniejsze elementy tego kodu CSS. Reszta odpowiada za wygląd oraz animacje użyte w preloaderze, więc przejdźmy do części głównej, czyli kodu JavaScript!

Kod JavaScript.

Wszystko wykonuje się za sprawą kilku linii, może standardowo pokażę całość przed omówieniem konkretnych elementów:

const preload = document.querySelector('.preload');

preload.classList.add('show-preloader');
window.addEventListener('load', () => {
    preload.classList.remove('show-preloader');
});

Zacznijmy od razu:

const preload = document.querySelector('.preload');

Do zmiennej preloader przypisujemy kontener o takiej samej klasie.

preload.classList.add('show-preloader');

W tym miejscu wykonuje się polecenie, dodające klasę, którą opisałem przy okazji omawiania kodu CSS. Dzięki tej linii od razu ujrzymy nasz preloader.

window.addEventListener('load', () => {
    preload.classList.remove('show-preloader');
});

Tu z kolei całość się kończy, usuwając wcześniej dodaną klasę od razu po załadowaniu się witryny. Dzięki temu ujrzymy w pełni funkcjonalną stronę internetową.

const preload = document.querySelector('.preload');

preload.classList.add('show-preloader');
window.addEventListener('load', () => {
  	setTimeout(() => {
    	preload.classList.remove('show-preloader');
  	}, 2000);
});

Podsumowanie.

Tak oto prezentuje się kod naszego preloadera. Warto jeszcze nadmienić, że jeśli wykonujemy całość na serwerze lokalnym, to nasz preloader zniknie praktycznie od razu po wejściu na stronę. Dlatego w przypadku demo tego projektu lekko zmodyfikowałem kod JavaScript, dodając opóźnienie:

Kod odpowiedzialny za usuwanie klasy show-preloader został zamknięty w funkcji setTimeout, która sprawia, że preloader znika po dwóch sekundach od załadowania się witryny.

Oczywiście jeśli masz jakiekolwiek pytania lub sugestie, to zapraszam Cię do komentowania tego artykułu, a jeśli wyniosłeś z niego wartość, to będę niezwykle wdzięczny za jego udostępnienie! 🙂

Komentarze

Może dodasz coś od siebie?