How to animate semicircle-like meter indicating elapsed time with HTML/CSS/JS?
I am looking for a solution for how to go about animating the following image indicating elapsed time as you see below. To make it easier for explanatory purposes, I would like the animation to take place in 10% intervals (despite me showing the 67% image example.) In effect, the colored gradient you see in the meter would be revealed and perhaps unmasked at these different 10% intervals to show more of the colored gradient. Could I employ some sort of masking technique with a
<div> and perhaps some CSS3 transforms? I have this image in different layers in PhotoShop so it is definitely possible for me to manipulate the elements. How should I go about doing this?
This is what it looks like at 67% complete:
..and 100% complete:
There are some ways to do it.
The most used lately are with JS and canvas, but there are pure CSS3 methods too. All of these I will post use a complete circle but in your case, you can use as base and edit them to your needs.
For more results, google 'css radial progress bar'.