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.
Przewijanie ekranów z wtyczką One Page Scroll
Przeczytaj artykuł
Umieszczanie i animacja ilustracji SVG
Przeczytaj artykuł
Czy może ktoś wie jak ukryć pasek boczny aby nie przesuwać strony podczas ładowania?
Bardzo dobry przykład — acz jedna uwaga. Jeżeli strona zawiera inne elementy fixed (a u mnie zawiera nagłówek i stopkę) to loader wyświetla się pomiędzy nimi, zatem nie zajmuje całej strony. Trochę tym byłem zdziwiony, ale faktycznie tak jest.
witam, uczę się programowania…jak przerobić ten kod aby działał na każdy wczytywany obrazek poprzez ajax?
Super. Dzięki 🙂
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…
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?
Właśnie problem w tym, że cały czas widnieje na stronie i nie znika po załadowaniu. Próbowałem wyrzucić wszystkie skrypty z pliku script.js, których użyłem, ale to nie pomogło. Sam kod JS, który jest tu podany umieszczam w pliku index.html przed zamknięciem tagu . Proszę spojrzeć na screen w załączniku i widniejący błąd w konsoli. https://uploads.disquscdn.com/images/8ab9e7b6f24d90bd9e51ed7fbcfd44bb50fed587bb55355bc80db2d67c64d6ae.png
Problem prawdopodobnie rozwiązałem.
Zapis kodu:
$(window).load(function()
zmieniłem na:
$(window).on(’load’, function()
Mam nadzieje, że tym razem jest dobrze.
Tak jak zmieniłem na $(window).on(‚load’, function() to zaczęło działać dzięki.
Preloader na setTimeout to dobry pomysł?
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 🙂
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.
Proste i fajnie wyglądające :).
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.