bih · July 30, 2012 00:09
diff --git a/Bilawal-Preloader.html b/Bilawal-Preloader.html
 <!doctype html>
 <head>
 	<title>Bilaw.al Loader</title>
 	<!-- Produced by @bilawalhameed -->
 	
 <!-- tha css. kthxbai. -->
 <style type="text/css">
 	#bilawal-loading {
 		position: relative;
 		width: 112px;
 		height: 114px;
 	}
 	
 	#bilawal-loading span {
 		display: block;
 		position: absolute;
 		top: 0px;
 		left: 0px;
 		width: 100%;
 		height: 100%;
 	}
 	
 	#bilawal-loading span#outline {
 		background: url(http://bilaw.al/code/bilawal-loader/bilawal-layout.png) no-repeat;
 		z-index: 1;
 	}
 	
 	#bilawal-loading span#fill {
 		position: relative;
 		background: url(http://bilaw.al/code/bilawal-loader/bilawal-bw.png) top left repeat-x #fff;
 		top: 0;
 		height: 0px;
 		max-height: 100%;
 	}
 	
 	#bilawal-loading span#fill img {
 		opacity: 0;
 	}
 </style>
 </head>
 <!-- just to centralise tha loader -->
 <body style="width: 539px;margin:10% auto 0;text-align:center;">
 		
 		<!-- da html element w/ a css id for stylin' -->
 		<center>
 			<div id="bilawal-loading"></div>
 		</center>
 		
 		<a href="https://gist.github.com/3202758" target="_blank" style="margin:40px 0;display:inline-block;text-decoration:none;font-size:30px;padding:8px 20px;font-family:georgia,arial;letter-spacing:-1px;color:#fff;background:#336699">grab *me* right from github</a>
 		<span id='c' style='font-weight:bold;font-size:25px;color:#336699;font-family:arial;display:block;font-style:italic'></span>

 <!-- tha god damn jquery filez. -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 <script src="https://raw.github.com/danro/jquery-easing/master/jquery.easing.js" type="text/javascript"></script>

 <script type="text/javascript">
 // declaration of the damn func. looks easy to to read.
 (function($){
 	$.fn.bilawalLoader = function(_config) {
 		var config = $.extend({ height: '100%', speed: 1500, easing: 'easeInOutQuad' }, _config);
 		
 		config.parent_height = parseInt($(this).height());
 		
 		if(config.height.indexOf('%') > -1) {
 			config.height = Math.round(config.parent_height * ( parseInt(config.height.replace('%', '')) / 100));
 		}
 		
 		if($(this).find('span').size() != 2) {
 			$(this).empty().html('<span id="outline"></span><span id="fill"><img src="http://bilaw.al/code/bilawal-loader/bilawal-ready.png"></span>');
 		}
 		
 		$(this).find('#fill').animate({
 			//top: config.parent_height - parseInt(config.height),
 			height: parseInt(config.height) + 'px',
 			'background-position-x': (parseInt($(this).css('background-position-x').replace('px', '')) + ((Math.floor(Math.random() * (10 - 1 + 1)) + 1))) + '%'
 		}, config.speed, config.easing, function(){
 			if(config.height == config.parent_height) {
 				$(this).parent('#bilawal-loading').find('span#outline').css('background-image', 'url() transparent');
 				$(this).find('img').animate({ opacity: 1 }, 1500);
 			}
 			
 			if(typeof config.callback == 'function') {
 				config.callback();
 			}
 		});
 	};
 	
 })(jQuery);

 // a little test run. doing it large.
 $(document).ready(function(){
 	var h = 10, s = 500, mins = 600, maxs = 50;
 	$('#bilawal-loading').bilawalLoader({ speed: s, height: h + '%', callback: function(){ m(s); } });
 	function m(s) {
 		h = h + 10;
 		s = Math.floor(Math.random() * (maxs - mins + 1)) + mins;
 		
 		if(h > 100) { $("body span#c").text('P.S. *my* animation just completed!'); return; }
 		$('#bilawal-loading').bilawalLoader({ speed: s, height: h + '%', callback: function(){ m(s); } });
 	}
 });
 </script>

 </body>
 </html>
	<!doctype html>
	<head>
	<title>Bilaw.al Loader</title>
	<!-- Produced by @bilawalhameed -->

	<!-- tha css. kthxbai. -->
	<style type="text/css">
	#bilawal-loading {
	position: relative;
	width: 112px;
	height: 114px;
	}

	#bilawal-loading span {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	}

	#bilawal-loading span#outline {
	background: url(http://bilaw.al/code/bilawal-loader/bilawal-layout.png) no-repeat;
	z-index: 1;
	}

	#bilawal-loading span#fill {
	position: relative;
	background: url(http://bilaw.al/code/bilawal-loader/bilawal-bw.png) top left repeat-x #fff;
	top: 0;
	height: 0px;
	max-height: 100%;
	}

	#bilawal-loading span#fill img {
	opacity: 0;
	}
	</style>
	</head>
	<!-- just to centralise tha loader -->
	<body style="width: 539px;margin:10% auto 0;text-align:center;">

	<!-- da html element w/ a css id for stylin' -->
	<center>
	<div id="bilawal-loading"></div>
	</center>

	<a href="https://gist.github.com/3202758" target="_blank" style="margin:40px 0;display:inline-block;text-decoration:none;font-size:30px;padding:8px 20px;font-family:georgia,arial;letter-spacing:-1px;color:#fff;background:#336699">grab me right from github</a>
	<span id='c' style='font-weight:bold;font-size:25px;color:#336699;font-family:arial;display:block;font-style:italic'></span>

	<!-- tha god damn jquery filez. -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://raw.github.com/danro/jquery-easing/master/jquery.easing.js" type="text/javascript"></script>

	<script type="text/javascript">
	// declaration of the damn func. looks easy to to read.
	(function($){
	$.fn.bilawalLoader = function(_config) {
	var config = $.extend({ height: '100%', speed: 1500, easing: 'easeInOutQuad' }, _config);

	config.parent_height = parseInt($(this).height());

	if(config.height.indexOf('%') > -1) {
	config.height = Math.round(config.parent_height * ( parseInt(config.height.replace('%', '')) / 100));
	}

	if($(this).find('span').size() != 2) {
	$(this).empty().html('<span id="outline"></span><span id="fill"><img src="http://bilaw.al/code/bilawal-loader/bilawal-ready.png"></span>');
	}

	$(this).find('#fill').animate({
	//top: config.parent_height - parseInt(config.height),
	height: parseInt(config.height) + 'px',
	'background-position-x': (parseInt($(this).css('background-position-x').replace('px', '')) + ((Math.floor(Math.random() * (10 - 1 + 1)) + 1))) + '%'
	}, config.speed, config.easing, function(){
	if(config.height == config.parent_height) {
	$(this).parent('#bilawal-loading').find('span#outline').css('background-image', 'url() transparent');
	$(this).find('img').animate({ opacity: 1 }, 1500);
	}

	if(typeof config.callback == 'function') {
	config.callback();
	}
	});
	};

	})(jQuery);

	// a little test run. doing it large.
	$(document).ready(function(){
	var h = 10, s = 500, mins = 600, maxs = 50;
	$('#bilawal-loading').bilawalLoader({ speed: s, height: h + '%', callback: function(){ m(s); } });
	function m(s) {
	h = h + 10;
	s = Math.floor(Math.random() * (maxs - mins + 1)) + mins;

	if(h > 100) { $("body span#c").text('P.S. my animation just completed!'); return; }
	$('#bilawal-loading').bilawalLoader({ speed: s, height: h + '%', callback: function(){ m(s); } });
	}
	});
	</script>

	</body>
	</html>