How to create a progress bar similar to Grooveshark?

Question

I'm curious ... how do I start creating a custom progress bar, for example, like one Grooveshark? If you look at the image below, the progress bar is an image in the form of a shark and fills when the page loads.

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

Thank you Christo

Answer 1

, , PNG . ( z-index) , .

- , , , : 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);​