Comment créer une "barre" de progression similaire à Grooveshark?

Question

Je suis curieux ... comment pourrais-je créer une barre de progression personnalisée comme celle de Grooveshark? Si vous regardez l'image ci-dessous, la barre de progression est une image en forme de requin et se remplit au fur et à mesure du chargement de la page.

Je pense que cela est très cool et aimerait savoir comment il est fait. Cela peut-il être fait par programme, ou est-ce fait en flash? Je voudrais vraiment le faire en JavaScript (jQuery) si c'est possible. Où/Comment démarrer?

Merci, Hristo

Answer 1

La partie de l'image contenant le requin pourrait être un PNG avec la forme de requin coupé. Placer un élément juste en dessous (via z-index) et en animer la largeur donnera l'impression que le requin se remplit.

J'ai réussi à accomplir quelque chose de similaire en n'utilisant qu'une image et en animant image de fond: 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);​