Html5 / Javascript, preloader/intro animation

I need someone to create a 10 second animation of the attached egg hatching graphics.

The animation starts off with the eggs sat still and the thermometer at 0. As the thermometer rises the eggs start to twitch, shake, vibrate. then start to crack and when the thermometer hits 100 the eggs pop open and chicks pop out of 2 of the eggs, buttons pop out of the others.. these buttons are meant to bounce out of the eggs and into the top right of the screen to create a menu 20 px from the right of the screen (the screen will be resizable so if this is an issue they can bounce off the screen and i will slide the buttons into place from off the screen after the animation has finished) (the chick just need to act chick-like, pecking or scratching.. that sort of thing) they are flat vector style chicks so nothing 3d is necessary.

All of the graphics are ready in a psd so no design will be required.

The animation must be done with html/javascript - video and flash elements are not an option.

Depending on how large the rest of the site is I may wish to have the animation as a preloader where the the thermometer will reflect the percentage of the site that is loaded so it would be good if i could easily interchange a timer variable with an amount-loaded variable (i can edit the code myself to get this working at a later date but it would be good if you keep this in mind when writing the code) also consider that if this is a pre-loader and the site takes 30 seconds to load i would want the stages of the hatching animation to to loop while the page is loading rather than the movement within the animation just going 3 times slower.

Hope this sounds doable and i haven't come across as demanding :P .. If you think you can help feel free to bid... Preference will be given to people that can show me examples of previous animation work that uses html and javascript.

Thanks for your time