Trying out PxLoader with Backbone.js

This is a LoadingState UI spike

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://thinkpixellab.com/pxloader/js/PxLoader.js"></script>
<script src="http://thinkpixellab.com/pxloader/js/PxLoaderImage.js"></script>
<div id="foo"></div>

<script type="text/template" id="loading-state-ui">
<div class="loading">
    <p>Loading</p>
    <div class="progress progress-striped">
        <span></span>
        <div class="bar"></div>
    </div>
</div>
</script>

CSS

.progress { position: relative; }
.progress span { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; text-align: center; }

JavaScript

//
// NOTE: unless we're tagging each and every asset, we should remove the extra indentation
// and use an array of strings (urls)

var LOAD_THESE_ASSETS = [
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/4/original/3S.png?1334126873"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/5/original/4H.png?1334126874"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/6/original/4S.png?1334126874"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/7/original/5H.png?1334126875"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/8/original/5S.png?1334126875"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/9/original/6H.png?1334126875"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/10/original/6S.png?1334126876"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/18/original/10S.png?1334126881"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/icons/2981/original/icon.gif?1334126868"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/instructions/2981/original/instructions.gif?1334126868"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/5/original/4H.png?1334126874"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/6/original/4S.png?1334126874"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/7/original/5H.png?1334126875"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/8/original/5S.png?1334126875"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/9/original/6H.png?1334126875"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/10/original/6S.png?1334126876"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/data/18/original/10S.png?1334126881"
  },
  {
    "url": "http://s3.amazonaws.com/brainfit-prototype/icons/2981/original/icon.gif?1334126868"
  },
  {
    "url":...