Animation with Preloader

http://gianlucaguarini.github.io/jquery.html5loader/examples/demo-nprogress.html

by Apple Ilagan

HTML

<script src="https://raw.githubusercontent.com/GianlucaGuarini/jquery.html5loader/master/src/jquery.html5Loader.js"></script>
<script src="https://raw.githubusercontent.com/GianlucaGuarini/jquery.html5loader/master/src/animations/jquery.html5Loader.line.js"></script>
<div class="screen flashbg">
	<div class="planecon"><div class="plane"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image35.png" /></div></div>
    <div class="slidecontent">  
    <div class="slide1"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image1.png" /></div>
    <div class="slide2"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image8.png" /></div>
    <div class="slide2b"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image8b.png" /></div>
    <div class="slide3"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image11.png" /></div>
    <div class="slide3b"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image11b.png" /></div>
    <div class="slide4"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image14.png" /></div>
    <div class="slide4b"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image14b.png" /></div>
    <div class="slide5"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image17.png" /></div>
    <div class="slide5b"><img src="http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image17b.png" /></div>
    <div class="slide6"><img...

CSS

/*Slideshow
--------------*/
img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; 
/* IE8 */ 	
}

.flashbg {
	width:100%;
	height:534px;
	background:url(http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/bgflash.jpg) center top repeat-x;
	position:relative;
	min-width:1190px;
}
.slidecontent {
	position:relative;
	width:1190px;
	margin:0 auto;
	overflow:hidden;
	height: 534px;
/*	display:none;*/
}
.the_islideshow {height:534px; width:100%; position:absolute; z-index:-9; 
text-align:center; min-width:1160px;}
.the_islideshow img {width:100%; height:auto;}

/*Slide Items
---------------------------*/
.planecon {position:absolute; width:100%; min-width:1190px; height:100px; z-index:20; overflow:hidden;}
.plane {position:absolute; width:132px; left:-300px;}
.slide1 {position:absolute; width:212px; height:303px; margin:247px 0 0 595px; z-index:20;
display:none; overflow:hidden;}
.slide2 {position:absolute; width:208px; height:29px; margin:350px 0 0 0; z-index:4;
display:none; overflow:hidden;}
.slide3 {position:absolute; width:418px; height:100px; margin:250px 0 0 70px; z-index:4;
display:none; overflow:hidden;}
.slide4 {position:absolute; width:895px; height:275px; margin:180px 0 0 250px; z-index:4;
display:none; overflow:hidden;}
.slide5 {position:absolute; width:170px; height:39px; margin:330px 0 0 1020px; z-index:2;
display:none; overflow:hidden;}
.slide6 {position:absolute; width:300px; height:147px; margin:230px 0 0 790px; z-index:2;
display:none; overflow:hidden;}
.slide7 {position:absolute; width:181px; height:243px; margin:160px 0 0 700px; z-index:0;
display:none; overflow:hidden;}
.slide8 {position:absolute; width:199px; height:324px; margin:130px 0 0 300px; z-index:0;
display:none; overflow:hidden;}
.slide9 {position:absolute; width:150px; height:234px; margin:130px 0 0 500px; z-index:0;
display:none;...

JavaScript

var files = {
				files: [
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image35.png",
						"type": "IMAGE"
					},
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image32b.png",
						"type": "IMAGE"
					},				
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image32.png",
						"type": "IMAGE"
					},
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image29b.png",
						"type": "IMAGE"
					},				
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image29.png",
						"type": "IMAGE"
					},
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image23b.png",
						"type": "IMAGE"
					},
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image23.png",
						"type": "IMAGE"
					},
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image20b.png",
						"type": "IMAGE"
					},
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image20.png",
						"type": "IMAGE"
					},
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image17b.png",
						"type": "IMAGE"
					},				
					{
						"source": "http://aios2-staging.agentimage.com/a/akhomesforyou.com/htdocs/wp-content/themes/akhomesforyou/images/image17.png",
						"type": "IMAGE"
					},				
					{
						"source":...