Show progress bar or spinner while KineticJS is drawing the stage

Question

You could show a "loading" .gif until your KineticJS project gets running

Just layer a loading.gif under your canvas.

Then when your project is loaded, remove the gif.

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/YaU8W/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    #wrapper{
        position:relative;
        width:200px;
        height:200px;
    }
    #canvas{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #loading{
        position:absolute; top:50px; left:50px;
        border:1px solid gray;
    }
</style>

<script>
$(function(){

    // Load your KineticJS project

    // After your KineticJS is loaded, remove loading.gif          
    // var element = document.getElementById("loading");
    // element.parentNode.removeChild(element);

}); // end $(function(){});
</script>

</head>

<body>
    <div id="wrapper">
        <img id="loading" src="https://dl.dropboxusercontent.com/u/139992952/loading1.gif" width=32 height=32></canvas>
        <canvas id="canvas" width=200 height=200></canvas>
    </div>
</body>
</html>