how to make animated arc using css3

Question

I have made this arc but I'm unable to animated it. Could you please explain on how to go about it

this is my fiddle http://jsfiddle.net/cancerian73/23Wjj/

.circle {
width: 60px;
height: 60px;
border-style: solid;
border-radius: 35px;
border-width: 5px;
border-color: #999 transparent transparent transparent;
}
.arc-top {
border-color: #999 transparent transparent transparent;
}

Just added a screenshot where i want to fill the grey from 0 to 100 or 0 to anything like 60. This is how I am looking at enter image description here

This is pretty cool but I still feel like SVG animation is the way to go since its more robust with better support. Try raphaeljs.com — im_benton, Nov 08 '13 at 07:01
Hey San. Did this work for you? I can make the svg version if you need. — im_benton, Nov 10 '13 at 00:04
Hey Benton thanks a ton but i managed to do it. You can have a look. Thought its not a neat way of doing. You can have a look. just scroll down to section called Investment http://www.spheretekk.com/avenue/animate/ Just for eduction can you show me a small demo of svg — San, Nov 10 '13 at 04:46

score 2 · Answer 1 · edited May 23 '17 at 10:32

As you commented, refer my answer here, which is similar to what you are looking for..

Demo (Modified version of the fiddle I answered on the question which I've linked)

Where are you even animating the arc? Here am using CSS3 @keyframe with transform property, and am rotating the element in 3 parts i.e at 0%, 50% and 100%. Rest is self explanatory, animation-duration will control the total duration of your animation, animation-iteration-count will set the animation to infinite and the last one here animation-timing-function is important for animation to get a consistent flow.

Demo

.circle {
   -webkit-animation-duration: 5s;
   -webkit-animation-name: animation;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;

   -moz-animation-duration: 5s;
   -moz-animation-name: animation;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;

   animation-duration: 5s;
   animation-name: animation;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   width: 60px;
   height: 60px;   
   border-style: solid;
   border-radius: 35px;
   border-width: 5px;
   border-color: #999 transparent transparent transparent;
}
.arc-top { border-color: #999 transparent transparent transparent;}

@-moz-keyframes animation {
    0% {-moz-transform: rotate(0);}
    50% {-moz-transform: rotate(180deg);}
    100% {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes animation {
    0% {-webkit-transform: rotate(0);}
    50% {-webkit-transform: rotate(180deg);}
    100% {-webkit-transform: rotate(360deg);}
}

@keyframes animation {
    0% {transform: rotate(0);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}

I have added a screenshot and you demo is not animating. WHat is missing? — San, Nov 08 '13 at 06:07
@San You want to fill the arc or you want to move an object on the arc? — Mr. Alien, Nov 08 '13 at 06:19
Hi Mr. Alien I want to move the grey and make it look like the grey is filling the white alone with the fork. I hope you understand me — San, Nov 08 '13 at 06:22
@BramVanroy thanks a lot for pointing it out, did a real silly mistake :) btw I am just figuring out why the knob demo is failing — Mr. Alien, Nov 08 '13 at 06:57
@BramVanroy Ok I saw the console, it's some issue with raw git hub included file in chrome MIME type.. if you just test the code on local it will work — Mr. Alien, Nov 08 '13 at 07:01

score 0 · Answer 2 · answered Nov 08 '13 at 06:36

0

Please try this piece of code, you may require some modifications though,

Working demo http://codepen.io/anon/pen/Jtepx

This is modified from CSS 3 tricks http://css-tricks.com/css-pie-timer/

answered Nov 08 '13 at 06:36

Prasanna Aarthi

3,439
4
26
48

how to make animated arc using css3

2 Answers2