artstyles,
<!DOCTYPE html><html class=''>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Loading Effects | Demo 11</title>
<meta name="description" content="Page Loading Effects: Modern ways of revealing new content" />
<meta name="keywords" content="page loading, svg animation, loading effect, fullscreen svg" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/PageLoadingEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/PageLoadingEffects/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/PageLoadingEffects/css/component.css" />
<script src="http://tympanus.net/Development/PageLoadingEffects/js/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="pagewrap" class="pagewrap">
<div class="container show" id="page-1">
<header class="codrops-header">
<h1>Page Loading Effects <span>Modern ways of revealing new content</span></h1>
<a class="pageload-link" href="#page-2">Open Overlay #1</a>
<a class="pageload-link" href="#page-3">Open Overlay #2</a>
<a class="pageload-link" href="#page-4">Open Overlay #3</a>
</header>
</div><!-- /container -->
<!-- Overlay #1 -->
<div class="container" id="page-2">
<section>
<h2>Overlay #1</h2>
<p><a class="pageload-link" href="#page-1">Go back</a></p>
</section>
</div>
<!-- Overlay #1 -->
<!-- Overlay #2 -->
<div class="container" id="page-3">
<section>
<h2>Overlay #2</h2>
<p><a class="pageload-link" href="#page-1">Go back</a></p>
</section>
</div>
<!-- Overlay #2 -->
<!-- Overlay #2 -->
<div class="container" id="page-4">
<section>
<h2>Overlay #3</h2>
<p><a class="pageload-link" href="#page-1">Go back</a></p>
</section>
</div>
<!-- Overlay #2 -->
<div id="loader" class="pageload-overlay" data-opening="m -5,-5 0,70 90,0 0,-70 z m 5,35 c 0,0 15,20 40,0 25,-20 40,0 40,0 l 0,0 C 80,30 65,10 40,30 15,50 0,30 0,30 z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none" >
<path d="m -5,-5 0,70 90,0 0,-70 z m 5,5 c 0,0 7.9843788,0 40,0 35,0 40,0 40,0 l 0,60 c 0,0 -3.944487,0 -40,0 -30,0 -40,0 -40,0 z"/>
</svg>
</div><!-- /pageload-overlay -->
</div><!-- /pagewrap -->
<script src="http://tympanus.net/Development/PageLoadingEffects/js/classie.js"></script>
<script src="http://tympanus.net/Development/PageLoadingEffects/js/svgLoader.js"></script>
<script>
(function () {
var pageWrap = document.getElementById('pagewrap'),
pages = [].slice.call(pageWrap.querySelectorAll('div.container')),
currentPage = 0, triggerLoading = [].slice.call(pageWrap.querySelectorAll('a.pageload-link')),
loader = new SVGLoader(document.getElementById('loader'), {
speedIn: 400,
easingIn: mina.easeinout
});
function init() {
triggerLoading.forEach(function (trigger,i) {
trigger.addEventListener('click', function (ev) {
ev.preventDefault();
loader.show();
setTimeout(function () {
loader.hide();
classie.removeClass(pages[currentPage], 'show');
currentPage = currentPage ? 0 : i + 1;
classie.addClass(pages[currentPage], 'show');
}, 800);
});
});
}
init();
}());
</script>
</body></html>