<div class="loader" id="loader">
	<span class="loader__cow" id="cow"></span>
</div>

body {
	background: url(https://engage-codepen.s3.amazonaws.com/2016/bar-block-cow/bg.jpg) center top;
}

.loader {
	opacity: 0;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;

	&__cow {
		background: url(https://engage-codepen.s3.amazonaws.com/2016/bar-block-cow/preloader.png) 0 0 no-repeat;
		position: fixed;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		width: 400px;
		height: 260px;
	}

	.loading-animation-complete & {
		display: none;
	}
}

var $loader = {
	root: $('#loader'),
	cow: $('#cow')
};

var loader = {
	animation: {
		inToView: .5,
		totalTime: 3.2,
		frames: {
			total: 70,
			width: 400,
			pauseAt: 60,
			pauseFor: 1
		}
	}
};

var phase1Time = loader.animation.totalTime * (loader.animation.frames.pauseAt / loader.animation.frames.total),
	phase2Time = loader.animation.totalTime * ((loader.animation.frames.total - loader.animation.frames.pauseAt) / loader.animation.frames.total);

var moo = function(){

	TweenLite
		.set($loader.cow, {
			backgroundPosition: '0px 0px'
		});

	TweenLite
		.fromTo($loader.root, loader.animation.inToView, {
			opacity: 0,
		},{
			opacity: 1,
			ease: Cubic.easeOut,
			repeat: 1,
			onComplete: function(){

				TweenLite
					.to($loader.cow, phase1Time, {
						backgroundPosition: '-' + (loader.animation.frames.width * loader.animation.frames.pauseAt) + 'px 0px',
						ease: SteppedEase.config( loader.animation.frames.pauseAt ),
						repeat: -1,
						onComplete: function(){

							TweenLite
								.to($loader.cow, phase2Time, {
									backgroundPosition: '-' + (loader.animation.frames.width * loader.animation.frames.total) + 'px 0px',
									ease: SteppedEase.config( loader.animation.frames.total - loader.animation.frames.pauseAt ),
									delay: loader.animation.frames.pauseFor,
									repeat: -1
								});

						}
					});

			}
		});

}

$loader.root
	.imagesLoaded({
		background: true
	}, function() {
		
		moo();

		setInterval(function(){
		
			moo();

		}, 5000);

	});