Jak wykonać preloader w czystym JavaScript’cie?

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:

var preload = document.getElementsByClassName('preload')[0];

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

Zacznijmy od razu:

var preload = document.getElementsByClassName('preload')[0];

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', function () {
    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ą.


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:

var preload = document.getElementsByClassName('preload')[0];

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

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! 🙂

Programista zakochany w JavaScript’cie, twórca stron internetowych i jak widać od niedawna bloger 🙂

3 comments Add yours
  1. Imo po załadowaniu strony warto ściągnąć z window ‘load’ event listener. Strona ładuje sie raz i nie ma potrzeby nasłuchiwać dalej tego iwentu 🙂

    Dodatkowo jeśli nie zależy nam na obsłudze starych przeglądarek to zamiast metody ‘getElementsByClassName’ polecam uzyć ‘querySelector’ albo ‘querySelectorAll’ (w tym przypadku to pierwsze, bo szukamy tylko jednego elementu), jest wygodniejsza w użyciu.

    1. Rzeczywiście dobrze będzie usunąć eventListener, za chwilkę poprawię artykuł. 🙂

      Jeśli chodzi o querySelector, to dziękuję Ci za tę radę. Wg mnie nie ma dużej różnicy pomiędzy tymi dwoma sposobami, ale w sumie zawsze warto skracać kod, więc również zmienię te miejsce. 🙂

    2. Co do starszych przeglądarek, to warto dodać, że nowszym “ficzerem” jest classList – wymaga minimum IE 10 a querySelector tylko IE 8 😉

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *