I need an animation that will be able to be deployed in the iPhone / iPad (therefore, NO FLASH) that will show a bucket empty, and shaded by a color (parameter controlled) which should be similar but not exactly like the image attached. I am open to all visual representations that work on the devices specified below. I then need this bucket to slowly fill up by the image becoming a darker shade of the original color - in a way that easily can be seen as the bucket being filled with a liquid of the same color (only darker). The speed of it filling up will be dictated by a single numeric parameter increasing.
At the beginning of the animation, the user would set the COLOR parameter by hexidecimal or HTML color code. The user would set the FILL parameter with a single number to represent the "FULL" state (100%) of the bucket. The animation program would begin with the bucket at 0% full, and then it would fill the animated bucket with the color change as the FILL parameter changes or increases value.
If the FILL Parameter gets OVER the FULL state (more than 100%), then the animation should slowly and proportionally show the color liquid overflowing - first down the side of the bucket, and then filling an area around the bottom of the bucket.
There is free code for how this is done on the net - but I have no idea if this works: [url removed, login to view]
This must work on a web page, and on an iPhone / iPad - even if we need separate code to do so.