Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I got the task of making an loading page for a webapp, based on the image above. The animation is basically the circle being filled from the left side to the right side, both in a clockwise and anti-clockwise way, but I have no idea how to do such animation. =/
Could someone give me a light on how to do this? It may be using canvas (I’ll use the library Raphael.js), CSS (CSS3 Animations), or even just images (animating then with javascript).
You could do it with the canvas element and some sort of bezier curve animation, but it may be just as well to do it with images (and certainly easier). A large sprite of PNG frames could handle this easily and it wouldn’t be that large of an image. Even better, since the top and bottom mirror each other, you could make the images for just the top, and then duplicate the element and flip it (with CSS transformations) to make the bottom half.