Untitled

<!DOCTYPE HTML>

<html>
<head>
    <title>sprites</title>

    <script src="http://heartcode-canvasloader.googlecode.com/files/heartcode-canvasloader-min-0.9.1.js"></script>
         <!-- This script creates a new CanvasLoader instance and places it in the wrapper div -->
    <script type="text/javascript">
        function Preloader()
        {
        var cl = new CanvasLoader('preloader');
        cl.setShape('roundRect'); // default is 'oval'
        cl.setColor('#9e9e9e');
        cl.setDiameter(50); // default is 40
        cl.setDensity(40); // default is 40
        cl.setRange(1); // default is 1.3
        cl.setSpeed(1); // default is 2
        cl.setFPS(100); // default is 24
        cl.show(); // Hidden by default

        var img = new Image();
        img.src = 'http://www.letsgodigital.org/images/producten/2149/testrapport/olympus-e-450-test-photos.jpg';
        img.onload = function() {
        cl.hide();
        document.getElementsByTagName('body')[0].appendChild(img);

        }


        }
    </script>
</head>

<body onLoad="Preloader()">
    <div id="preloader" class="wrapper">
    </div>
</body>
</html>