Untitled

<!DOCTYPE html>
<head>
<title>PartyHard</title>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19349612-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<script>

  function partyHard( drunkenness ) {

    var mapCanvas = [];
    var mapCanvasCtx = [];
    for (var i = 0; i < drunkenness * 1200; i++) {
    mapCanvas[i] = document.createElement('canvas');
        mapCanvas[i].width = 2500;
        mapCanvas[i].height = 2500;
        mapCanvasCtx[i] = mapCanvas[i].getContext('2d');
        mapCanvasCtx[i].fillStyle = 'rgb(0, 0, 0)';
        mapCanvasCtx[i].fillRect( 0, 0, 1700, 1700 );
    }
    console.log(window);
  }

  function INIT() {

    var progress = 0;

    document.querySelector('.progessBar div').style.width = '0%';

    var mainInterval = setInterval(function() {

      document.querySelector('.label').innerHTML += '.';
      if ( document.querySelector('.label').innerHTML.length > 10 ) document.querySelector('.label').innerHTML = 'Loading';

      progress += 200 / (2 * progress + 40);

      document.querySelector('.progessBar div').style.width = progress + '%';

      if (progress > 10) {
        partyHard( 4 * progress - 10 );
      }

    }, 300);

  }

  window.onload = INIT;

</script>
</head>

<style>

  body {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #111;
    overflow: hidden;
  }

  .mainBlock {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    width: 400px;
  }

  .progessBar {
    width: 400px;
    height: 4px;
    border-radius: 3px;
    background-color: #181818;
  }

  .progessBar div {
    position: absolute;
    width: 0%;
    height: 3px;
    border-radius: 4px;
    background-color: #fff;
  }

  .label {
    padding-top: 5px;
    font: normal 13px arial;
    letter-spacing: 0.1em;
    color: #eee;
  }

  .ohmedWasHere {
    position: relative;
    width: 400px;
    margin-right: auto;
    margin-left: auto;
    text-align: right;
    color: #555;
    font: normal 10px tahoma;
    letter-spacing: 0.1em;
  }

</style>


<body>

  <div class="mainBlock" >
    <div class="label">Loading</div>
    <div class="progessBar">
      <div></div>
    </div>
  </div>

  <div class="ohmedWasHere">ohmed was here.</div>

</body>
</html>