How do I create a progress "bar" similar to Grooveshark?

I'm curious... how would I go about creating a custom progress bar like the one Grooveshark used to have? If you look at the image below, the progress bar is an image 开发者_如何学JAVAin the shape of a shark and fills in as the page loads.

I think this is very cool and would love to know how it is done. Can this be done programmatically, or is it done in flash? I would really like to do this in JavaScript (jQuery) if it is possible. Where/How do I start?

Thanks, Hristo

The portion of the image containing the shark could be a PNG with the shark shape cut out. Placing an element just beneath this (via z-index), and animating the width of it it will give the impression of the shark filling in.

I managed to accomplish something similar using nothing more than an image, and animating its background image: http://jsbin.com/imibe3

HTML

<img src="http://sampsonresume.com/labs/emptyfish.png" class="fish" />

CSS

img.fish { 
  background-color:#f1f1f1; 
  background-image:url(water_640x480.jpg);
  background-position:-580px 0;
  background-repeat:no-repeat;
}

jQuery/Javascript

$("img.fish").animate( { 'backgroundPosition':'+=600px 0' }, 10000);​