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.

Evner: HMLT5, Javascript

Se mere: html 5 canvas animation, go to top javascript, go animation, 10 second animation, javascript animation, html5 up, html5 image, canvas javascript, animation javascript, animation html5, javascript pause, transparent html5, canvas animation, html background white, html5 outline, html5 fade, html5 bottom, simple html javascript form, html5 canvas animation, javascript html5 canvas, javascript outline, simple javascript animation, simple form javascript, animation fade, html5 animation javascript

Om arbejdsgiveren:
( 16 bedømmelser ) Bogojina, Slovenia

Projekt ID: #4117849

Tildelt til:


Hi, I am ready to do this project, check PM.

$30 USD in 0 dage
(29 bedømmelser)

2 freelancere byder i gennemsnit $30 på dette job


We are an excellent IT Consulting & Services company with excellence in Technology, Software Development and Support services.

$30 USD på 1 dag
(2 bedømmelser)

i am expert html5 and javascript i can do this animation exactly as you need and will give you the ability to specify the times for all animation parts.

$30 USD på 1 dag
(0 bedømmelser)