Login Latest Snippets Home My Account
Snippee! A personal code snippet manager... Store, share, organize! ...

Preloader for L@GU

Published: 2011-08-25 21:56:12 - In: jQuery

Use this script to display the throbber before your js and css files load from the content collection. Remove using jquery or using plain javascript. NOTE: Will not work in IE (unless IE9 is forced to render as IE9)

<style type="text/css">
#blanket { background-color: #FFF; bottom: 0; left: 0; opacity: 0.7; position: absolute; right: 0; top: 0; z-index: 1000; }
#throbber { position: absolute; z-index: 2000; }
</style>

<div id="blanket"></div>
<canvas id="throbber" width="50" height="50"></canvas>
<script type="text/javascript">
<!--
var canvas=document.getElementsByTagName("canvas")[0],context=canvas.getContext('2d'),opacity=100,opacityStep=7,opacityTurn=100,moveTo=["24, 3","30, 12","36, 16","38, 23","36, 30","31, 34","24, 36","18, 34","12, 29","11, 23","6, 12","13, 5"],lineTo=["24, 11","34, 5","42, 11","47, 23","44, 34","36, 42","24, 44","14, 41","5, 34","3, 23","13, 17","18, 12"],length=moveTo.length,i=0,iterate=null;(function drawStrokes(){function strokeRgba(){opacity=(opacity>16)?opacity-opacityStep:100;return"rgba(51, 102, 153, "+(opacity/100).toFixed(2)+")";}
if(iterate){var w=canvas.width;context.clearRect(0,0,w,w);clearTimeout(iterate);}
context.lineWidth=4;context.lineCap="round";for(i=0;i<length;i++){var thisMoveTo=moveTo[i].split(", "),thisLineTo=lineTo[i].split(", ");context.beginPath();context.moveTo(thisMoveTo[0],thisMoveTo[1]);context.lineTo(thisLineTo[0],thisLineTo[1]);context.strokeStyle=strokeRgba();context.stroke();}
iterate=setTimeout(drawStrokes,50);})();(function positionThrobber(){function viewport(){return{height:window.innerHeight!=null?window.innerHeight:document.body!=null?document.body.clientHeight:null,width:window.innerWidth!=null?window.innerWidth:document.body!=null?document.body.clientWidth:null}}
var left=(viewport().width/2)-(canvas.width/2),top=(viewport().height/2)-(canvas.height/2);canvas.style.left=left+"px";canvas.style.top=top+"px";})();
// -->
</script>

<!--
  Remove using (in your js file):

  iterate = null;
  $("#blanket, #throbber").fadeOut('fast');
-->