Groovesharkに似たプログレスバーを作成するにはどうしたらいいですか？

Question

私は興味があります...私はGroovesharkが持っていたようなカスタムプログレスバーを作成する方法はありますか？下の画像を見ると、プログレスバーはサメの形の画像で、ページが読み込まれると塗りつぶされます。

私は、これは非常にクールであり、それがどのように行われるかを知るのが大好きだと思います。プログラムでこれを行うことはできますか、それともフラッシュで実行できますか？可能であれば、JavaScript（jQuery）でこれを行うことを本当にしたいと思います。どこから始めるのですか？

おかげで、

フリスト

Answer 1

サメを含む画像の一部を切り出しサメ形状のPNGであり得ます。これの直下に（Z-インデックスを介して）要素を配置し、その幅をアニメ化すると、サメ​​の印象が与えられます。

イメージだけを使って似たようなことを達成しました。背景画像：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);​