Simple HTML5 canvas animation

I need a simple HTML5 javascript canvas animation. Something like progress indicator. Check the image attached. 1. The background should be transparent. 2. There should be 2 circles. One inside the other so it would form a ring. The ring should be white inside and have gray outline. 3. Inside there should be the animation. There should also be a ring. It should fill up clockwise. First step is to go from the top (12 AM) to bottom (6 AM). There should be a pause there. And than proceed from bottom to top. There should also be ease-in and ease-out. I should be able to set up the time frame for the animation. lets say: 4 seconds for the first step, 5 seconds for the pause, and 3 seconds to complete the animation. Than the blue ring should fade-out in 1 second. All the process should than repeat for certain amount of time (100 seconds) or indefinitely.