Skip to content

Instantly share code, notes, and snippets.

@bih

bih/Cheddar-loader.html

Created July 28, 2012 19:00
Show Gist options
  • Save bih/3194425 to your computer and use it in GitHub Desktop.
Save bih/3194425 to your computer and use it in GitHub Desktop.
Download ZIP
A simple gist of a Cheddar-logo HTML/CSS/JS logo loader effect. Boredom was a big part of this gist fruition. It is a bit 'hacky' like, so I wouldn't recommend it in production.
Raw
Cheddar-loader.html
<!doctype html>
<head>
<title>Cheddar Loader</title>
<!-- Produced by @bilawalhameed -->
<!-- tha css. kthxbai. -->
<style type="text/css">
#cheddar-loading {
position: relative;
width: 539px;
height: 100px;
}
#cheddar-loading span {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#cheddar-loading span#outline {
background: url(http://i.imgur.com/2SWzW.png) no-repeat;
z-index: 1;
}
#cheddar-loading span#fill {
position: relative;
-background: url(http://i.imgur.com/cMAm0.png) top left repeat-x #ff7243;
background: #ff7243;
top: 100%;
height: 0px;
max-height: 100%;
}
</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' -->
<div id="cheddar-loading"></div>
<a href="https://gist.github.com/3194425" target="_blank" style="margin:40px 0;display:inline-block;text-decoration:none;font-size:25px;font-family:arial;color:#ff7243;background:#F5D2C6">Grab it right from Github</a>
<span id='c' style='font-weight:bold;font-size:25px;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.cheddarLoader = 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"></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).css({ 'background-image': 'url()' });
}
if(typeof config.callback == 'function') {
config.callback();
}
});
};
})(jQuery);
// a little test run. doing it large.
$(document).ready(function(){
var h = 10, s = 500, mins = 2000, maxs = 50;
$('#cheddar-loading').cheddarLoader({ 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. The animation just completed!'); return; }
$('#cheddar-loading').cheddarLoader({ speed: s, height: h + '%', callback: function(){ m(s); } });
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment