W tym artykule dowiesz się jak zrobić prosty preloader, który ukryje stronę do momentu pełnego załadowania.

W tym przykładzie użyjemy animacji flat preloader, której kod znajdziesz w tym artykule. Możesz wykorzystać dowolny z przedstawionych tam efektów lub stworzyć własny. Przejdźmy teraz do budowy preloadera.

Struktura HTML

Zaraz za znacznikiem <body> dodajemy kod:

<div id="loader-wrapper">
    <div class="load">
      <hr/><hr/><hr/><hr/>
    </div>
</div>

To cały HTML potrzebny do zrobienia preloadera. Wewnątrz diva #loader-wrapper znajduje się tylko prosta animacja, ale możesz umieścić tam cokolwiek.

Style CSS

Przejdźmy do stylów CSS.

#loader-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ECF0F1;
  /* display: none; */
}

Tym kodem rozciągamy #loader-wrapper na cały ekran. Wysoka wartość z-index sprawia, że użytkownik nie będzie w stanie zobaczyć ładującej się „pod spodem” strony. Dodajmy teraz style do naszego loadera.

.load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    /* display: none; */
}

.load hr {
    border: 0;
    margin: 0;
    width: 40%;
    height: 40%;
    position: absolute;
    border-radius: 50%;
    animation: spin 2s ease infinite;
}

.load :first-child {
    background: #19A68C;
    animation-delay: -1.5s;
}

.load :nth-child(2) {
    background: #F63D3A;
    animation-delay: -1s;
}

.load :nth-child(3) {
    background: #FDA543;
    animation-delay: -0.5s;
}

.load :last-child {
    background: #193B48;
}

@keyframes spin {
    0%, 100% {
        transform: translate(0)
    }
    25% {
        transform: translate(160%)
    }
    50% {
        transform: translate(160%, 160%)
    }
    75% {
        transform: translate(0, 160%)
    }
}

Jeśli teraz odświeżysz stronę, to zobaczysz animacje czterech okręgów na szarym tle. Jeśli masz jakąś inną treść na stronie (poza elementem #loader-wrapper), to będzie ona niewidoczna.

Ukrywanie preloadera

Preloader jest już prawie gotowy. Musimy go jeszcze ukryć, gdy strona zostanie już załadowana. W tym celu skorzystamy z funkcji jQuery – load. Przed zamykającym znacznikiem </body> dodaj kod:

<script>

$(window).load(function() {
    $("#loader-wrapper").fadeOut();
});

</script>

Div #loader-wrapper zniknie dopiero wtedy, gdy strona zostanie w pełni załadowana. Jeśli testujesz stronę na serwerze lokalnym, to ładowanie będzie zbyt szybkie byś mógł zobaczyć preloader. Na potrzeby testu możemy opóźnić zniknięcie preloadera:

<script>

$(window).load(function() {
    setTimeout(
        function() {
            $("#loader-wrapper").fadeOut();
        }, 3000);
});

</script>

W ten sposób nakładka zniknie dopiero po 3 sekundach od załadowania strony. Pamiętaj, żeby na gotowej witrynie korzystać tylko z pierwszej wersji. Nie chcemy sztucznie opóźniać ładowania 🙂

Jest jeszcze jeden problem, którym musimy się zająć.

Wyłączony Javascript

Sporadycznie może się zdarzyć, że użytkownik z jakiegoś powodu będzie miał wyłączoną obsługę Javascript. W tym przypadku nie zobaczy naszej strony, ponieważ preloader nigdy nie zniknie.

W umieszczonym wcześniej kodzie CSS mogłeś zobaczyć dwie reguły display: none umieszczone wewnątrz komentarza. Możesz teraz usunąć znaki /* i */. Preloader oczywiście zniknie. Chcemy go pokazać tylko wtedy, gdy JS jest włączony. Zaraz po otwierającym znaczniku <script> dodaj kod:

$('html').addClass('js');

Co nam to da? Jeśli Javascript będzie włączony, to klasa .js zostanie poprawnie dodana. Do naszych stylów CSS dodajmy teraz prosty kod:

.js .load, .js #loader-wrapper {
  display: block;
}

Dzięki temu elementy preloadera będą widoczne tylko wtedy, gdy JS będzie działać poprawnie.

Pobierz pliki | Zobacz demo

  • pawel

    witam, uczę się programowania…jak przerobić ten kod aby działał na każdy wczytywany obrazek poprzez ajax?

  • Kuba Dura

    Super. Dzięki 🙂

  • Dariusz Darek

    Dopiero się uczę, ale nie wiem czy tylko u mnie należy zmienić

    $(window).load(function() {
    $(„#loader-wrapper”).fadeOut();
    });

    na

    $(window).ready(function() {
    $(„#loader-wrapper”).fadeOut();
    });

    żeby preloader zniknął po załadowaniu strony? Hmm…

    • Bartłomiej Mąkina

      ready() nie jest tym, o co nam chodzi, bo wykonuje się od razu po załadowaniu dokumentu HTML.

      Czy preloader umieszczony w demo na końcu artykułu znika poprawnie?

  • veranoo

    Preloader na setTimeout to dobry pomysł?

    • Bartłomiej Mąkina

      To nie jest dobry pomysł. setTimeout jest ustawiony tylko w celu testu na lokalnym serwerze. Załadowanie strony byłoby tak szybkie, że nie zobaczylibyśmy efektu. Na „normalnym” serwerze już z tego nie korzystamy 🙂

      • veranoo

        document.addEventListener(„DOMContentLoaded”, function(event) {
        console.log(„DOM fully loaded and parsed”);
        });

        Można w sumie zrobić tak i ładować w domie duży obrazek 🙂
        PS: Swoją drogą zawsze się zastanawiam jak działa preloader z progressbarem.

  • Dominik Węclewski

    Proste i fajnie wyglądające :).

  • Comandeer

    Ja proponowałbym coś w taki deseń: http://codepen.io/Comandeer/pen/mRqGmP → trza znaleźć lepszy sposób na ukrycie tekstu w .preloader__label, ale całość ma podpięte (mam nadzieję) odpowiedni role ARIA. Dodatkowo warto pomyśleć nad dodaniem [aria-busy=true] na html, gdy preloader będzie pokazywany.