Loader toevoegen

Loader

Download het onderstaande bestand en plaats deze afbeelding in de map '/img'

Voeg daarna de onderstaande code toe aan het index.html bestand (onder de <body> tag).

HTML - Loader

index.html

<div class="loader">
		<div class="inner"></div>
	</div>

Voeg de onderstaande CSS styling toe aan het style.css bestand.

CSS - Loader

css/style.css

.loader {
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1000;
}

.loader .inner {
	width: 100%;
	height: 100%;
	background: url(../img/loader.gif) center center no-repeat;
}

Voeg de onderstaande code toe aan het script.js bestand (boven de $(document).ready(function() {)

Javascript - Loader

js/script.js

$(window).on("load", function() {

	$(".loader .inner").fadeOut(500, function() {
		$(".loader").fadeOut(750);
	});

})

Uitleg